You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/changelog/2025-11-03.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
<<<<<<<HEAD
1
+
2
2
## Tab variants
3
3
4
4
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.
@@ -25,7 +25,7 @@ navigation:
25
25
```
26
26
27
27
[Learn more about tab variants](/learn/docs/configuration/tab-variants)
28
-
=======
28
+
29
29
## Custom icons across your navigation
30
30
31
31
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.
@@ -72,4 +72,4 @@ products:
72
72
```
73
73
74
74
Visit the [product switching documentation](/learn/docs/configuration/products#define-your-products) to learn more.
Copy file name to clipboardExpand all lines: fern/products/docs/pages/navigation/overview.mdx
+1-53Lines changed: 1 addition & 53 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -242,59 +242,7 @@ navigation:
242
242
243
243
## Tabs
244
244
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`.
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).
Copy file name to clipboardExpand all lines: fern/products/docs/pages/navigation/tabs.mdx
+40-56Lines changed: 40 additions & 56 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,18 @@
1
1
---
2
2
title: Tabs and tab variants
3
-
description: Create multiple content variations within a single tab using variants in Fern Docs navigation.
3
+
description: Organize your documentation with tabs and show different content variations using tab variants.
4
4
---
5
5
6
-
Within the navigation, you can 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`.
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
7
8
-
<Markdownsrc="/snippets/icons.mdx" />
8
+
## Tabs
9
9
10
-
<CodeBlocktitle="docs.yml">
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>
11
13
{/* <!-- vale off --> */}
12
14
13
-
```yaml
15
+
```yaml title="docs.yml"
14
16
tabs:
15
17
api:
16
18
display-name: API Reference
@@ -42,12 +44,18 @@ tabs:
42
44
{/* <!-- vale on --> */}
43
45
</CodeBlock>
44
46
45
-
Here's an example of what the Tabs implementation looks like:
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:
46
52
47
53
<Frame>
48
54
<img src="./images/tabs-sidebar.png" alt="Tabs displayed in the sidebar (default)" />
49
55
</Frame>
50
56
57
+
### Tabs placement
58
+
51
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).
52
60
53
61
<CodeBlock title="docs.yml">
@@ -60,24 +68,38 @@ layout:
60
68
61
69
## Tab variants
62
70
63
-
Tab variants let you display different content variations within a single tab. This is useful for showing different user types, implementation approaches, or experience levels without creating separate tabs.
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.
64
72
65
73
<Tip title="When to use variants vs. tabs">
66
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).
67
75
</Tip>
68
76
69
77
### Basic usage
70
78
71
-
Define a tab with a `variants` property instead of a `layout` property. Each variant has its own title and layout.
72
-
73
-
```yaml title="docs.yml"
74
-
tabs:
75
-
guides:
76
-
display-name: Guides
77
-
icon: book
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.
78
80
79
-
navigation:
80
-
- tab: guides
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
81
103
variants:
82
104
- title: For developers
83
105
layout:
@@ -91,12 +113,9 @@ navigation:
91
113
contents:
92
114
- page: Overview
93
115
path: ./pages/pm-overview.mdx
116
+
- tab: github
94
117
```
95
118
96
-
<Info title="RBAC">
97
-
Variants support role-based access control. For more information, see [Role based access control](/learn/docs/authentication/rbac).
-**Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported.
3
3
-**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.
4
4
-**Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"<svg>...</svg>"`).
0 commit comments