Tabs and tab variants
Group content into switchable tabs with optional variants
Tabs let you group sections of your documentation together, while tab variants allow you to display different content perspectives within a single tab.
Add tabs to group sections together. The example below shows tabs for Help Center, API Reference, and an external link to Github. Each tab has a display-name and icon.
In the navigation section, each tab reference must include either a layout (for content) or variants (for tab variants). Tabs with an href property are external links and must not include layout or variants.
Icons can be in three formats:
fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported../assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg."<svg>...</svg>").Here’s an example of how a tabs implementation renders:
Tabs display in the left sidebar by default. Use theme.tabs to control placement, style, and alignment.
The name shown in the tab header
Icons can be in three formats:
fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported../assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg."<svg>...</svg>").Custom URL slug for the tab
Exclude the tab slug from URLs
Hide the tab from navigation. See Hiding content for details.
Navigation structure for the tab’s content. Required unless the tab uses variants or href.
List of tab variants for displaying different content perspectives. Use instead of layout.
External URL. When set, clicking the tab redirects to this URL. Tabs with href must not include layout or variants.
Where the link opens. One of _blank, _self, _parent, or _top.
Path to a changelog folder, relative to the YAML file where it is set (e.g., docs.yml)
Role-based access control for the tab
When true, roles don’t inherit from parent elements
Conditional display configuration
Tab variants let you display different content variations within a single tab, and support RBAC. This is useful for showing different user types, implementation approaches, or experience levels without creating separate tabs.
Use variants for different perspectives on the same content area (REST vs. GraphQL, beginner vs. advanced). Use tabs for completely different documentation sections (guides vs. API Reference).
Define a tab with a variants property instead of a layout property. Each variant has its own title and layout. The example below shows two variants for the Help Center tab.
Display name for the variant
Navigation structure using the same format as regular tab layouts
Text displayed below the variant title
Icons can be in three formats:
fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported../assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg."<svg>...</svg>").Custom URL slug for the variant
Exclude the variant slug from URLs
Hide the variant from navigation. See Hiding content for details.
When true, this variant displays by default. If not specified, the first variant in the list is used.
Role-based access control for the variant
When true, roles don’t inherit from parent elements
Conditional display configuration