Sign Up

Tabs and Sub-tabs

screenshot of tabs and subtabs in a Doctave projectscreenshot of tabs and subtabs in a Doctave project

Tabs and Sub-tabs are used to organize content on your site. They let you create discrete sections with their own navigation structures.

  • Tabs are listed at the top of our documentation in the header
  • Each tab can optionally have subtabs, which are rendered on the left, above the navigation
  • Each tab and subtab has its own navigation structure

Tabs and sub-tabs are configured using the doctave.yaml file.

Setting up Tabs and Sub-tabs

The following will example covers a site with tabs and sub-tabs.

1. Add tabs to doctave.yaml

To add a tab, use the following example in your doctave.yaml:

  - label: Tab 1
    path: /
  - label: Tab 2
    path: /tab2
      - label: Sub-tab 1
        path: /tab2/sub-tab-1
      - label: Sub-tab 2
        path: /tab2/sub-tab-2
  - label: Tab 3
    path: /tab3
      - label: Sub-tab 1
        path: /tab3/sub-tab-1
      - label: Sub-tab 2
        path: /tab3/sub-tab-2

2. Add a navigation.yaml for each new sub-tab

Add a new navigation.yaml file in the folders:

  • tab1/navigation.yaml
  • tab2/sub-tab-1/navigation.yaml
  • tab2/sub-tab-2/navigation.yaml
  • tab3/sub-tab-1/navigation.yaml
  • tab3/sub-tab-2/navigation.yaml

An example navigation.yaml file may look like this:

- heading: Navigation for the tab
  - label: Foo

3. Add a for each new tab

Add a new landing page files in the tab folders:

  • tab1/
  • tab2/sub-tab-1/
  • tab2/sub-tab-2/
  • tab3/sub-tab-1/
  • tab3/sub-tab-2/

An example file may look like this:

# Tab

This is the landing page for the tab

Tabs with external links

You can also add tabs and subtabs that link to external sites. To do so, use the external field to the tab definition:


  - label: Link To External Site


You can add icons to your tabs and subtabs to make them easier to understand at a glance.

Doctave supports two open source icon sets:

To add an icon, use the icon key for the tab or subtab:


  - label: home
    path: /
    icon:          # Add the `icon` key
      set: lucide  # Specify which icon set you want to use
      name: home   # Specify the name of the icon

Lucide icons

Lucide icons have over 1000 useful icons to select from.

Select an icon, and copy the name of it into your doctave.yaml file:

Copying a Lucide icon name

Devicon icons

Devicon is an icon set that contains large set of programing related icons and logos. You can find most programing language and popular open source library icons in it.

NOTE: Doctave only supports the uncolored Devicon font icon varieties.

To find the name of the icon, use the plain name of the icon without the devicon- prefix or variant identifier.

For example, devicon-docker-plain becomes docker.

Finding the Devicon icon name

Was this page helpful?