Skip to content

Commit 187f10a

Browse files
devin-ai-integration[bot]coltondotiodevalog
authored
docs: add tab variants documentation (#1713)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Colton Berry <[email protected]> Co-authored-by: Devin Logan <[email protected]>
1 parent 3f734cf commit 187f10a

File tree

5 files changed

+193
-54
lines changed

5 files changed

+193
-54
lines changed

‎fern/products/docs/docs.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ navigation:
1919
path: ./pages/customization/what-is-docs-yml.mdx
2020
- page: Navigation
2121
path: ./pages/navigation/overview.mdx
22+
- page: Tabs and tab variants
23+
path: ./pages/navigation/tabs.mdx
24+
slug: tabs
2225
- page: Versions
2326
path: ./pages/navigation/versions.mdx
2427
- page: Products

‎fern/products/docs/pages/changelog/2025-11-03.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
## Tab variants
2+
3+
Create multiple content variations within a single tab using the new variants feature. This allows you to show different perspectives, user types, or implementation approaches for the same topic without creating separate tabs.
4+
5+
You can now define variants for tabs with different layouts, titles, subtitles, and icons. Each variant can have its own navigation structure, and you can explicitly set which variant should be the default.
6+
7+
```yaml title="docs.yml"
8+
navigation:
9+
- tab: guides
10+
variants:
11+
- title: For developers
12+
layout:
13+
- section: Getting started
14+
contents:
15+
- page: Quick start
16+
path: ./pages/dev-quickstart.mdx
17+
- title: For product managers
18+
default: true
19+
layout:
20+
- section: Getting started
21+
contents:
22+
- page: Overview
23+
path: ./pages/pm-overview.mdx
24+
```
25+
26+
[Learn more about tab variants](/learn/docs/configuration/tabs).
27+
128
## Custom icons across your navigation
229
330
You can now use your own image files as icons throughout your `docs.yml` navigation config, including for [navbar link](/learn/docs/configuration/what-is-docs-yml#navbar-links-configuration), [section, page](/learn/docs/configuration/navigation#sidebar-icons), and [product](/learn/docs/configuration/products#add-your-product-configuration) icons.
@@ -44,3 +71,4 @@ products:
4471
```
4572

4673
Visit the [product switching documentation](/learn/docs/configuration/products#define-your-products) to learn more.
74+

‎fern/products/docs/pages/navigation/overview.mdx‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -242,59 +242,7 @@ navigation:
242242

243243
## Tabs
244244

245-
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`.
246-
247-
<Markdown src="/snippets/icons.mdx" />
248-
249-
<CodeBlock title="docs.yml">
250-
{/* <!-- vale off --> */}
251-
252-
```yaml
253-
tabs:
254-
api:
255-
display-name: API Reference
256-
icon: puzzle # Font Awesome icon
257-
help:
258-
display-name: Help center
259-
icon: ./assets/icons/help-icon.svg # Custom image file
260-
github:
261-
display-name: GitHub
262-
icon: brands github # Font Awesome icon
263-
href: https://github.com/fern-api/fern
264-
265-
navigation:
266-
- tab: api
267-
layout:
268-
- section: Introduction
269-
contents:
270-
- page: My page
271-
path: my-page.mdx
272-
- api: API Reference
273-
- tab: help
274-
layout:
275-
- section: Help center
276-
contents:
277-
- page: Contact us
278-
path: contact-us.mdx
279-
- tab: github
280-
```
281-
{/* <!-- vale on --> */}
282-
</CodeBlock>
283-
284-
Here's an example of what the Tabs implementation looks like:
285-
286-
<Frame>
287-
<img src="./images/tabs-sidebar.png" alt="Tabs displayed in the sidebar (default)" />
288-
</Frame>
289-
290-
Tabs display in the left sidebar by default. To display them horizontally, set `tabs-placement` to `header` in your [layout configuration](/docs/configuration/what-is-docs-yml#layout-configuration).
291-
292-
<CodeBlock title="docs.yml">
293-
```yaml
294-
layout:
295-
tabs-placement: header
296-
```
297-
</CodeBlock>
245+
You can add tabs to group sections of content together. Tabs can contain different layouts and navigation structures, and you can use tab variants to show different content variations within a single tab. For more information, see [Tabs and tab variants](/learn/docs/configuration/tabs).
298246

299247
## Versions
300248

‎fern/products/docs/pages/navigation/tabs.mdx‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Tabs and tab variants
3+
description: Organize your documentation with tabs and show different content variations using tab variants.
4+
---
5+
6+
Tabs let you group sections of your documentation together, while tab variants allow you to display different content perspectives within a single tab.
7+
8+
## Tabs
9+
10+
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 `title` and `icon`.
11+
12+
<CodeBlock>
13+
{/* <!-- vale off --> */}
14+
15+
```yaml title="docs.yml"
16+
tabs:
17+
api:
18+
display-name: API Reference
19+
icon: puzzle # Font Awesome icon
20+
help:
21+
display-name: Help center
22+
icon: ./assets/icons/help-icon.svg # Custom image file
23+
github:
24+
display-name: GitHub
25+
icon: brands github # Font Awesome icon
26+
href: https://github.com/fern-api/fern
27+
28+
navigation:
29+
- tab: api
30+
layout:
31+
- section: Introduction
32+
contents:
33+
- page: My page
34+
path: my-page.mdx
35+
- api: API Reference
36+
- tab: help
37+
layout:
38+
- section: Help center
39+
contents:
40+
- page: Contact us
41+
path: contact-us.mdx
42+
- tab: github
43+
```
44+
{/* <!-- vale on --> */}
45+
</CodeBlock>
46+
47+
<Note title="Tab icons">
48+
<Markdown src="/snippets/icons.mdx" />
49+
</Note>
50+
51+
Here's an example of how a tabs implementation renders:
52+
53+
<Frame>
54+
<img src="./images/tabs-sidebar.png" alt="Tabs displayed in the sidebar (default)" />
55+
</Frame>
56+
57+
### Tabs placement
58+
59+
Tabs display in the left sidebar by default. To display them horizontally, set `tabs-placement` to `header` in your [layout configuration](/docs/configuration/what-is-docs-yml#layout-configuration).
60+
61+
<CodeBlock title="docs.yml">
62+
```yaml
63+
layout:
64+
tabs-placement: header
65+
```
66+
</CodeBlock>
67+
68+
69+
## Tab variants
70+
71+
Tab variants let you display different content variations within a single tab, and [support RBAC](/learn/docs/authentication/rbac). This is useful for showing different user types, implementation approaches, or experience levels without creating separate tabs.
72+
73+
<Tip title="When to use variants vs. tabs">
74+
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).
75+
</Tip>
76+
77+
### Basic usage
78+
79+
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.
80+
81+
```yaml title="docs.yml" startLine=20 {22-34}
82+
tabs:
83+
api:
84+
display-name: API Reference
85+
icon: puzzle
86+
help:
87+
display-name: Help center
88+
icon: home
89+
github:
90+
display-name: GitHub
91+
icon: brands github
92+
href: https://github.com/fern-api/fern
93+
94+
navigation:
95+
- tab: api
96+
layout:
97+
- section: Introduction
98+
contents:
99+
- page: My page
100+
path: my-page.mdx
101+
- api: API Reference
102+
- tab: help
103+
variants:
104+
- title: For developers
105+
layout:
106+
- section: Getting started
107+
contents:
108+
- page: Quick start
109+
path: ./pages/dev-quickstart.mdx
110+
- title: For product managers
111+
layout:
112+
- section: Getting started
113+
contents:
114+
- page: Overview
115+
path: ./pages/pm-overview.mdx
116+
- tab: github
117+
```
118+
119+
### Variant properties
120+
121+
<ParamField path="title" type="string" required={true}>
122+
Display name for the variant
123+
</ParamField>
124+
125+
<ParamField path="layout" type="list" required={true}>
126+
Navigation structure using the same format as regular tab layouts
127+
</ParamField>
128+
129+
<ParamField path="subtitle" type="string">
130+
Text displayed below the variant title
131+
</ParamField>
132+
133+
<ParamField path="icon" type="string">
134+
<Markdown src="/snippets/icons.mdx" />
135+
</ParamField>
136+
137+
<ParamField path="slug" type="string">
138+
Custom URL slug for the variant
139+
</ParamField>
140+
141+
<ParamField path="skip-slug" type="boolean">
142+
Exclude the variant slug from URLs
143+
</ParamField>
144+
145+
<ParamField path="hidden" type="boolean">
146+
Hide the variant from navigation
147+
</ParamField>
148+
149+
<ParamField path="default" type="boolean">
150+
When true, this variant displays by default. If not specified, the first variant in the list is used.
151+
</ParamField>
152+
153+
<ParamField path="viewers" type="string | list">
154+
Role-based access control for the variant
155+
</ParamField>
156+
157+
<ParamField path="feature-flag" type="string | object">
158+
Conditional display configuration
159+
</ParamField>
160+

‎fern/snippets/icons.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Icons support three formats:
1+
Icons can be in three formats:
22
- **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported.
33
- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file.
44
- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"<svg>...</svg>"`).

0 commit comments

Comments
 (0)