---
title: Navigation
description: Tabs, groups and page order, all set in docs.config.ts.
url: https://hexelstudio.com/docs/authoring/navigation
---

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.

```ts 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.

```ts
{ 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

<AccordionGroup>
  <Accordion title="A listed page has no file" defaultOpen>
    The build stops and names each missing slug with the file it expected, such as `content/docs/authoring/pages.mdx`.
  </Accordion>
  <Accordion title="A slug is listed twice">
    The build stops. A page has exactly one place in the navigation, so breadcrumbs and previous/next stay unambiguous.
  </Accordion>
  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## 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.