Skip to content

Commit 900f642

Browse files
Document external product links feature
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]>
1 parent 55e8142 commit 900f642

File tree

2 files changed

+68
-2
lines changed

2 files changed

+68
-2
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## External product links
2+
3+
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.

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

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ subtitle: Allow users to seamlessly navigate between different products you offe
2626

2727
Each product can contain its own distinct versions, tabs, sections, pages, and API references. Products can share content as well.
2828

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+
2931
## Add products to your docs
3032

3133
<Steps toc={true}>
@@ -119,9 +121,50 @@ If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure
119121
</Step>
120122
</Steps>
121123

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+
122165
### Add versioning to your products
123166

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.
125168

126169
<Note>For standalone versioning without products, see our [Versioning guide](/docs/configuration/versions).</Note>
127170

@@ -324,4 +367,4 @@ The dropdown menus for product and version selectors can be customized using the
324367
<img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
325368
</Frame>
326369
</Tab>
327-
</Tabs>
370+
</Tabs>

0 commit comments

Comments
 (0)