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.

An example docs.yml
1navigation:
2 - section: Home
3 contents:
4 - page: Introduction
5 path: ./intro.mdx
6 - page: Authentication
7 path: ./auth.mdx
8 - api: API Reference
9navbar-links:
10 - type: secondary
11 text: Contact support
12 url: https://example.com/support
13 - type: primary
14 text: Login
15 url: https://example.com/login

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.

Example navigation config
1navigation:
2 - section: Introduction
3 contents:
4 - page: My Page
5 path: ./pages/my-page.mdx
6 - api: API Reference

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:

Example navigation config
1navigation:
2 - section: Introduction
3 contents:
4 - page: My Page
5 path: ./pages/my-page.mdx
6 - page: Another Page
7 path: ./pages/another-page.mdx
8 - api: API Reference

To add another section, add another section to the navigation. Example:

Example navigation config with additional section
1navigation:
2 - section: Introduction
3 contents:
4 - page: My Page
5 path: ./pages/my-page.mdx
6 - api: API Reference
7 - section: Help Center
8 contents:
9 - page: Contact Us
10 path: contact-us.mdx

Hiding content

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:

Example navigation config with nested sections
1navigation:
2 - tab: guides
3 layout:
4 - section: Learn
5 contents:
6 - section: Key Concepts
7 contents:
8 - page: Embeddings
9 path: ./docs/pages/embeddings.mdx
10 - page: Prompt Engineering
11 path: ./docs/pages/prompts.mdx
12 - section: Generation
13 contents:
14 - page: Command Nightly
15 path: ./docs/pages/command.mdx
16 - page: Likelihood
17 path: ./docs/pages/likelihood.mdx

Result of above docs.yml example

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.

Example navigation config with icons
1navigation:
2 - section: Home
3 icon: fa-regular fa-home
4 contents:
5 - page: My Page
6 icon: fa-regular fa-file
7 path: ./pages/my-page.mdx
8 - api: API Reference
9 icon: fa-regular fa-puzzle

You can add a link to an external page within your sidebar navigation with the following configuration:

docs.yml
1navigation:
2 - section: Home
3 contents:
4 - page: Introduction
5 path: ./intro.mdx
6 - link: Our YouTube Channel
7 href: https://www.youtube.com/
An external link within navigation

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.

docs.yml
1tabs:
2 api:
3 display-name: API Reference
4 icon: puzzle
5 help:
6 display-name: Help Center
7 icon: home
8 github:
9 display-name: GitHub
10 icon: brands github
11 href: https://github.com/fern-api/fern
12
13 navigation:
14 - tab: api
15 layout:
16 - section: Introduction
17 contents:
18 - page: My Page
19 path: my-page.mdx
20 - api: API Reference
21 - tab: help
22 layout:
23 - section: Help Center
24 contents:
25 - page: Contact Us
26 path: contact-us.mdx
27 - tab: github

Here’s an example of what the Tabs implementation looks like:

Screenshot showing two vertically stacked tabs labeled API Reference and Help Center

Versions

If you have multiple versions of your documentation, you can introduce a dropdown version selector by specifying the versions.

A dropdown of the available versions

When adding an entry to the versions list, specify the version’s display-name, which is visible to users, and path, which is a file that must be in a folder called versions/:

docs.yml
1versions:
2 - display-name: v1.0
3 path: v1-0.yml # must be in a `versions` folder
4 - display-name: v1.1
5 path: v1-1.yml
versions/v1-0.yml
1navigation:
2 - section: Introduction
3 contents:
4 - page: My Page
5 path: my-page.mdx
6 - api: API Reference
versions/v1-1.yml
1tabs:
2 api:
3 title: API Reference
4 icon: puzzle
5 help:
6 title: Help Center
7 icon: home
8
9 navigation:
10 - tab: api
11 contents:
12 - section: Introduction
13 contents:
14 - page: My Page
15 path: my-page.mdx
16 - api: API Reference
17 - tab: help
18 contents:
19 - section: Help Center
20 contents:
21 - page: Contact Us
22 path: contact-us.mdx