Changelog

Tab variants

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.

You can now define variants for tabs with different layouts, titles, subtitles, and icons. Each variant can have its own navigation structure, and you can explicitly set which variant should be the default.

1
navigation:
2
  - tab: guides
3
    variants:
4
      - title: For developers
5
        layout:
6
          - section: Getting started
7
            contents:
8
              - page: Quick start
9
                path: ./pages/dev-quickstart.mdx
10
      - title: For product managers
11
        default: true
12
        layout:
13
          - section: Getting started
14
            contents:
15
              - page: Overview
16
                path: ./pages/pm-overview.mdx

Learn more about tab variants.

Custom icons across your navigation

You can use your own image files as icons throughout your docs.yml navigation config, including for navbar link, section, page, and product icons.

Icons support three formats:

• Font Awesome icons: Use icon names like fa-solid fa-seedling or fa-regular fa-leaf. Pro and Brand icons from Font Awesome are supported.
• Custom image files: Use relative paths to custom image files (e.g., ./assets/icons/plant-icon.svg). Paths are relative to the docs.yml file.
• Inline SVG: Provide an SVG string wrapped in quotes.

1
navigation:
2
  - section: Home
3
    icon: fa-regular fa-home  # Font Awesome icon
4
    contents:
5
      - page: Introduction
6
        icon: ./assets/icons/intro-icon.svg  # Custom image file
7
        path: ./pages/intro.mdx
8
      - page: Custom Features
9
        icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>"  # Inline SVG
10
        path: ./pages/custom.mdx
11
  - api: API Reference
12
    icon: fa-regular fa-puzzle

External product links

You can now configure products to link to external URLs (separate applications, third-party documentation, or other external resources) instead of documentation within your site.

External products appear in the product switcher alongside internal products but navigate users to the specified URL when selected. Unlike internal products, external products are defined directly in docs.yml using href—no standalone product .yml file is needed.

To define an external product, add an item to the products list in docs.yml with an href instead of a path:

1
products:
2
  - display-name: API Documentation
3
    path: ./products/api-docs.yml
4
    icon: fa-solid fa-book
5
    slug: api-docs
6
    subtitle: Complete API reference
7
8
  - display-name: Dashboard # External product
9
    href: https://dashboard.example.com
10
    icon: fa-solid fa-chart-line
11
    subtitle: Analytics and insights

Visit the product switching documentation to learn more.