Configure your site navigation
Use docs.yml
Every Fern Docs website has a special configuration file called docs.yml. Use this file to configure the navigation for your documentation site.
Sections, contents, and pages
The navigation organizes your documentation in the left-side nav bar. You can create sections for grouping related content. Each section has a name and a list of contents. The sections appear in the left-side nav bar in the order that they are listed in docs.yml.
In contents, list your pages with names and corresponding file paths. The supported file types for pages are .md or .mdx.
A basic navigation configuration with two sections is shown below. The first section is called Introduction and contains a single page called My Page. The second section is called API Reference. This is a special type of section that’s automatically generated by Fern, and you do not need to add any pages to it by hand. For more information, see the Generate API Reference page.
If you want to add another page to an existing section, create an .md or .mdx file. Then in docs.yml, create a new page in the contents list for that section, providing the path to the .md or .mdx file you created. Example:
To add another section, add another section to the navigation. Example:
Hiding content
To hide a page or an entire section of your docs, add hidden: true. A hidden page or section will still be discoverable using the exact URL, but it will be excluded from search and will not be indexed.
Section overviews
To add an overview page to a section, add a path property to the section.
Nested sections
If you’d like a section to toggle into more sections and pages, you can nest sections within sections. Here’s an example:
Sidebar icons
For icons to appear next to sections and pages, add the icon key. The value should be a valid Font Awesome icon name. Pro and Brand Icons from Font Awesome are supported.
Links
You can add a link to an external page within your sidebar navigation with the following configuration:
Tabs
Within the navigation, you can add tabs. Tabs are used to group sections together. The example below shows tabs for Help Center, API Reference, and an external link to Github. Each tab has a title and icon. Browse the icons available from Font Awesome. Pro and Brand Icons are supported.
Here’s an example of what the Tabs implementation looks like:
Versions
If you have multiple versions of your documentation, you can introduce a dropdown version selector by specifying the versions. For more information, check out our documentation on versioning.