Doc Navigation

Overview

Navigation configuration can be configured in the src/lib/server/navigation/doc-navigation.config.ts file. It uses a defineDocNavigation helper function to provide strong type safety for all of the options.

Tabs, Groups, and Pages

The config supports multiple "modes":

• Tabs: Categorizes Groups / Pages and displays the tabs in the header for /docs routes.
• Groups: Categorizes Pages and displays the groups in the sidebar for /docs routes.
• Pages: Refers to your actual markdown pages.

Defining Tabs

Tabs can have both Groups and Pages. Below is an example of defined Tabs:

const docNavigationConfig = defineDocNavigation({
	tabNextPrev: true, // allows next and previous buttons on a page to go to next tabs
	tabs: [ // define tabs or use 'auto' to load from file system.
		{
			title: 'Documentation',
			groups: [ // create a group under the 'Documentation' tab.
				{
					title: 'Getting Started',
					pages: 'auto' // automatically load markdown pages inside the 'Getting Started' group.
				}
			]
		},
		{
			title: 'Guides',
			pages: 'auto' // automatically load markdown pages inside the 'Guides' tab. A group is not required.
		}
	]
});

Tab Options

Below are the options used directly in the docNavigationConfig for Tabs:

Below are the options for the tabs option from the above table:

Defining Groups

Groups can only have Pages, but they can be created inside Tabs. Below is an example of defined Groups:

const docNavigationConfig = defineDocNavigation({
	groups: [ // define groups or use 'auto' to load from file system.
		{
			title: 'Getting Started',
			pages: 'auto' // automatically load markdown pages inside the 'Getting Started' group.
		},
		{
			title: 'Configuration',
			pages: 'auto' // automatically load markdown pages inside the 'Configuration' group.
		}
	]
});

Group Options

Below are the options used directly in the docNavigationConfig for Groups:

Below are the options for the groups option from the above table:

Defining Pages

Pages can only be defined alone, but they can be created inside Tabs and Groups. Below is an example of defined Pages:

const docNavigationConfig = defineDocNavigation({
	pages: [ // define pages or use 'auto' to load from file system.
		{ title: 'Introduction', icon: 'book-open-check', href: '/docs' },
		{ title: 'Quick Start', icon: 'rocket' },
		'loadRest' // you can use 'loadRest' to define some pages and load the rest from the file system.
	]
});

Page Options

Below are the options used directly in the docNavigationConfig for Pages:

Below are the options for the pages option from the above table: