Building and Customizing Your Docs

Product Switching

Allow users to seamlessly navigate between different products you offer.

A dropdown of the available products

Webflow
View Webflow’s Product Switcher

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

To add products to your docs:

1

Define your products

Create a products folder inside of your fern folder. To specify a product’s contents and navigational structure, add a .yml file to the products folder for each product. Make sure to include the navigation and tabs properties, if applicable.

$fern/
>  ├─ fern.config.json
>  ├─ generators.yml
>  ├─ docs.yml
>  └─ products/
>    ├─ ...
>    ├─ product-a.yml
>    └─ product-b.yml
1navigation: 
2  - section: Introduction
3    contents:
4      - page: Shared Resource
5        path: ../pages/shared-resource.mdx
6  - api: API Reference
2

Add your product configuration

To define a product, add an item to the products list in docs.yml, specifying the display-name and path.

The optional parameters are: image, icon, subtitle, slug, and versions.

If you provide both an image and an icon, the image will take precedence.

Products can be versioned or unversioned. The following is an example of how more complex products might be organized:

$fern/
>  ├─ fern.config.json
>  ├─ generators.yml
>  ├─ docs.yml
>  ├─ pages/
>    ├─ ...
>  └─ products/
>    ├── product-a.yml # basic unversioned product
>    ├── product-b/ # unversioned product with product-specific pages
>    │   ├─ pages/...
>    │   └─ product-with-pages.yml
>    └── product-c/ # versioned product
>        ├─ product-c.yml
>        └─ versions/
>          ├─ v1/
>          │  ├─ v1.yml
>          │  └─ pages/...
>          └─ v2/
>            ├─ v2.yml
>            └─ pages/...

For more information on setting up versions, follow our versioning docs.

docs.yml
1products:
2  - display-name: Product A
3    path: ./products/product-a.yml
4    icon: fa-solid fa-leaf # optional
5    slug: product-a # optional
6    subtitle: Product A subtitle # optional
7
8  - display-name: Product B
9    path: ./products/product-b/latest.yml # <-- default showing latest
10    image: ./images/product-b.png # optional
11    slug: product-b # optional
12    subtitle: Product B subtitle # optional
13    versions: # optional
14      - display-name: Latest
15        path: ./products/product-b/latest.yml
16      - display-name: V2
17        path: ./products/product-b/v2.yml
3

Remove extra navigation from docs.yml

If your docs.yml file includes a navigation field or a tabs field, be sure to remove. Those fields should now belong in the product-specific .yml files.