Configuration

Product Switching

Allow users to seamlessly navigate between different products you offer.
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.

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 # Site-level contents and navigation
>  └─ products/
>    ├─ ...
>    ├─ product-a.yml # Contents and navigation for Product A
>    └─ product-b.yml # Contents and navigation for Product B
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.

The below example is a docs.yml configuration for a site with two products, Product A and Product B.

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
3

Add versioning to your products (optional)

You can optionally add versions to a product. Versioned and unversioned products can live next to each other in your site. Each version of a single product has its own yml file.

In the below example, Product A is unversioned and Product B is versioned:

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

The top-level doc.yml configuration for a Fern Docs website containing two products, one unversioned and one versioned, might look something like this:

docs.yml
1products:
2  - display-name: Product A # unversioned
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 # versioned
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

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

4

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.

Customizing Selector Styling

You can directly customize the appearance of the product and version selectors by targeting their CSS classes:

  • fern-product-selector - Controls the styling of the product selector
  • fern-version-selector - Controls the styling of the version selector
Example of a styled product selector

Common Styling Adjustments

Adjusting positioning: Use transform: translateY(Npx) to adjust the vertical positioning of the selectors. This ensures that the product and version selectors match the line height of your logo for better visual alignment.

Enhancing visual prominence: You can modify the border radius and add borders to make the selectors more prominent and better integrated with your site’s design aesthetic.

1.fern-product-selector {
2  transform: translateY(2px);
3  border-radius: 8px;
4  border: 1px solid var(--border);
5}
6
7.fern-version-selector {
8  transform: translateY(1px);
9  border-radius: 1000px;
10  border: 1px solid var(--border);
11}

Customizing Dropdown Styling

The dropdown menus for product and version selectors can be customized using these specific CSS classes:

  • fern-product-selector-radio-group - Controls the styling of the product dropdown
  • fern-version-selector-radio-group - Controls the styling of the version dropdown
Example of a styled product selector

Common Styling Adjustments

Enable a grid layout for the dropdown:

1.fern-product-selector-radio-group {
2  display: grid;
3  grid-template-columns: repeat(2, 1fr);
4  gap: 8px;
5}