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
Add documentation for the new feature that allows products to link to external URLs using href instead of path. This enables users to include links to separate applications or third-party documentation in their product switcher.
Changes:
- Add new section 'Link to external products' with configuration examples
- Document external product properties (href, display-name, subtitle, icon, image, audiences)
- Add changelog entry for 2025-11-03
- Clarify that products can be internal or external
Co-Authored-By: Catherine Deskur <[email protected]>
You can now configure products to link to external URLs instead of hosting documentation on your site. This is useful when you want to include links to separate applications, third-party documentation, or other external resources in your product switcher.
4
+
5
+
External products appear in the product switcher alongside internal products but navigate users to the specified URL when selected.
6
+
7
+
To define an external product, add an item to the `products` list in `docs.yml` with an `href` instead of a `path`:
8
+
9
+
```yaml title="docs.yml"
10
+
products:
11
+
- display-name: API Documentation
12
+
path: ./products/api-docs.yml
13
+
icon: fa-solid fa-book
14
+
slug: api-docs
15
+
subtitle: Complete API reference
16
+
17
+
- display-name: Dashboard
18
+
href: https://dashboard.example.com
19
+
icon: fa-solid fa-chart-line
20
+
subtitle: Analytics and insights
21
+
```
22
+
23
+
Visit the [product switching documentation](/learn/docs/navigation/products#link-to-external-products) to learn more.
Copy file name to clipboardExpand all lines: fern/products/docs/pages/navigation/products.mdx
+45-2Lines changed: 45 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,6 +26,8 @@ subtitle: Allow users to seamlessly navigate between different products you offe
26
26
27
27
Each product can contain its own distinct versions, tabs, sections, pages, and API references. Products can share content as well.
28
28
29
+
Products can be either internal (with their own navigation structure hosted on your docs site) or external (linking to an external URL like a separate application or third-party documentation).
30
+
29
31
## Add products to your docs
30
32
31
33
<Stepstoc={true}>
@@ -119,9 +121,50 @@ If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure
119
121
</Step>
120
122
</Steps>
121
123
124
+
## Link to external products
125
+
126
+
You can configure a product to link to an external URL instead of hosting documentation on your site. This is useful when you want to include links to separate applications, third-party documentation, or other external resources in your product switcher.
127
+
128
+
External products appear in the product switcher alongside internal products but navigate users to the specified URL when selected.
129
+
130
+
### Configure an external product
131
+
132
+
To define an external product, add an item to the `products` list in `docs.yml` with an `href` instead of a `path`. You can still include optional parameters like `image`, `icon`, and `subtitle`.
133
+
134
+
<CodeBlock title="docs.yml">
135
+
```yaml
136
+
products:
137
+
- display-name: API Documentation
138
+
path: ./products/api-docs.yml
139
+
icon: fa-solid fa-book
140
+
slug: api-docs
141
+
subtitle: Complete API reference
142
+
143
+
- display-name: Dashboard
144
+
href: https://dashboard.example.com
145
+
icon: fa-solid fa-chart-line
146
+
subtitle: Analytics and insights
147
+
```
148
+
</CodeBlock>
149
+
150
+
In this example, "API Documentation" is an internal product with its own navigation structure, while "Dashboard" is an external product that links to `https://dashboard.example.com`.
151
+
152
+
### External product properties
153
+
154
+
External products support the following properties in `docs.yml`:
155
+
156
+
- `display-name`(required) - The title displayed in the product switcher
157
+
- `href`(required) - External URL to navigate to when the product is selected
158
+
- `subtitle`(optional) - Brief description of the product
159
+
- `icon`(optional) - Icon to display in the product switcher
160
+
- `image`(optional) - Image to display in the product switcher (takes precedence over `icon`)
161
+
- `audiences`(optional) - Control visibility across different documentation instances
162
+
163
+
<Note>External products cannot have versions, tabs, or navigation structures since they link to external URLs.</Note>
164
+
122
165
### Add versioning to your products
123
166
124
-
You can optionally add versions to your products. Versioned and unversioned products can live next to each other in your site.
167
+
You can optionally add versions to your products. Versioned and unversioned products can live next to each other in your site.
125
168
126
169
<Note>For standalone versioning without products, see our [Versioning guide](/docs/configuration/versions).</Note>
127
170
@@ -324,4 +367,4 @@ The dropdown menus for product and version selectors can be customized using the
324
367
<img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
0 commit comments