Navigation
You have the option of adding tabs to your pages. This is only recommended if you have several pages that will use the same tabs. If you only have one page with a set of tabs, it might be better for discoverability to change the tabs to menu items.
Tabs in YAML
To create a tabbed page, you just need to point the theme to the path of your first tab. This is the structure of the YAML configuration for this page and it’s siblings.
- title: Guidespages:- title: Configurationpath: /guides/configuration- title: Shadowingpath: /guides/shadowing- title: Stylingpath: /guides/styling- title: Navigation
File structure
Let’s check out the directory structure for this page. Notice how you’ll add another directory that corresponds with the one in the YAML file.
.├── pages│ └── guides│ ├── configuration.mdx│ ├── shadowing.mdx│ ├── styling.mdx│ └── navigation│ ├── tabs.mdx│ └── sidebar.mdx
Markdown updates
The last step is to add the name of your tabs to the front matter of each markdown file that has tabs.
---title: Sidebartabs: ['Sidebar', 'Tabs']---
Tabs with apostrophes
If your tab name contains an apostrophe, you only need to include the
grammatically correct text in the frontmatter. Your file name and
nav-items.yaml should not include the apostrophe.
---title: Sidebartabs: ['Sidebar', 'What’s new']---
For the “What’s new” tab above, the source file would be whats-new.mdx, and
the path would look like /guides/navigation/whats-new.