Skip to content
Hexel StudioDocs

Navigation

Tabs, groups and page order, all set in docs.config.ts.

On this page

Navigation lives in docs.config.ts. It uses the same shape as the navigation.tabs block in Mintlify's docs.json, so an existing Mintlify navigation can be pasted in.

docs.config.ts
navigation: {
  tabs: [
    {
      tab: "Authoring",
      groups: [
        {
          group: "Pages",
          pages: ["authoring/pages", "authoring/navigation"],
        },
        {
          group: "Components",
          pages: [
            "authoring/components",
            "authoring/code-blocks",
            { group: "API pages", pages: ["authoring/api-fields"] },
          ],
        },
      ],
    },
  ],
},

Tabs

Each tab is a section in the header. A tab links to its first page, and the sidebar shows only the current tab's groups. Previous and Next at the bottom of a page stay inside the tab.

Groups

A group is a labelled list in the sidebar. Pages appear in the order you list them.

A group inside pages becomes a nested, collapsible group, like API pages in this tab. It opens on its own when it holds the current page; set expanded: true to keep it open everywhere.

{ group: "API pages", expanded: true, pages: ["authoring/api-fields"] }

Titles

Navigation lists slugs, not titles. Labels come from each page's frontmatter: sidebarTitle if set, otherwise title. Renaming a page is a change to one file.

Checks at build time

A listed page has no file

The build stops and names each missing slug with the file it expected, such as content/docs/authoring/pages.mdx.

A slug is listed twice

The build stops. A page has exactly one place in the navigation, so breadcrumbs and previous/next stay unambiguous.

A file is not listed

The build continues and prints the slug. The page is not published, which lets you keep drafts in the repository.

Search suggestions and the landing page

The same file sets the pages suggested when search opens (search.suggestions) and everything on the landing page: the headline, the action buttons, the code example, the start cards and the product cards.