> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aihubmix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation

> Organize your docs to guide your users to the information they need

The `navigation` property controls the hierarchy of your documentation.

## Pages

If you don't want any hierarchy, you can just define pages within your `navigation` field.

Each entry of the `pages` array must be a path to a file that exists within your repo.
Note you do not need to append `.mdx` to the file paths.

```json theme={null}
{
  "navigation": {
    "pages": [
      "overview",
      "quickstart",
      "advanced/components",
      "advanced/integrations"
    ]
  }
}
```

## Groups

Groups allow you to group your pages. Groups can also be nested within each other.

```json theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Getting Started",
        "pages": [
          "quickstart",
          {
            "group": "Editing",
            "icon": "pen-paintbrush",
            "pages": ["development", "web-editor"]
          }
        ]
      },
      {
        "group": "Writing Content",
        "pages": ["writing-content/page", "writing-content/text"]
      }
    ]
  }
}
```

## Tabs

Tabs help distinguish between different topics or sections of your
documentation.

<Frame>
  <img className="block dark:hidden rounded-md" src="https://mintcdn.com/aihubmix/UgvkHPDoK6o04763/images/tabs-light.png?fit=max&auto=format&n=UgvkHPDoK6o04763&q=85&s=22234cdcc4b2f61be90d088fae87581e" width="1684" height="576" data-path="images/tabs-light.png" />

  <img className="hidden dark:block rounded-md" src="https://mintcdn.com/aihubmix/UgvkHPDoK6o04763/images/tabs-dark.png?fit=max&auto=format&n=UgvkHPDoK6o04763&q=85&s=63479c71f2aa99f36f40a89a71a37ea0" width="1642" height="572" data-path="images/tabs-dark.png" />
</Frame>

```json docs.json theme={null}
"navigation": {
  "tabs": [
    {
      "tab": "API References",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    },
    {
      "tab": "SDKs",
      "pages": [
        "sdk/fetch",
        "sdk/create",
        "sdk/delete",
      ]
    },
    {
      "tab": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}
```

## Anchors

Anchors are another way to section your content.

<Frame>
  <img className="block dark:hidden rounded-md" src="https://mintcdn.com/aihubmix/2nT-vfHReUtOnhMv/images/anchor-light.png?fit=max&auto=format&n=2nT-vfHReUtOnhMv&q=85&s=6eb9285029c57856d98eff7c98832af3" width="1642" height="478" data-path="images/anchor-light.png" />

  <img className="hidden dark:block rounded-md" src="https://mintcdn.com/aihubmix/2nT-vfHReUtOnhMv/images/anchor-dark.png?fit=max&auto=format&n=2nT-vfHReUtOnhMv&q=85&s=aa2828c1c217fb30516a32a75f394a25" width="1634" height="476" data-path="images/anchor-dark.png" />
</Frame>

The configuration is very similar to the tab configuration.

```json docs.json theme={null}
"navigation": {
  "anchors": [
    {
      "anchor": "API References",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    },
    {
      "anchor": "SDKs",
      "pages": [
        "sdk/fetch",
        "sdk/create",
        "sdk/delete",
      ]
    },
    {
      "anchor": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}
```

## Nested Hierarchy

You can use both anchors and tabs together - either one can be nested within each other interchangeably.

<CodeGroup>
  ```json Top-Level Anchors theme={null}
  {
    "navigation": {
      "anchors": [
        {
          "anchor": "Anchor 1",
          "groups": [
            {
              "group": "Group 1",
              "pages": [
                "some-folder/file-1",
                "another-folder/file-2"
                "just-a-file"
              ]
            }
          ]
        }
        {
          "anchor": "Anchor 2",
          "groups": [
            {
              "group": "Group 2",
              "pages": [
                "some-other-folder/file-1",
                "various-different-folders/file-2",
                "another-file"
              ]
            }
          ]
        }
      ]
    }
  }
  ```

  ```json Top-Level Tabs theme={null}
  {
    "navigation": {
      "tabs": [
        {
          "tab": "Tab 1",
          "groups": [
            {
              "group": "Group 1",
              "pages": [
                "some-folder/file-1",
                "another-folder/file-2"
                "just-a-file"
              ]
            }
          ]
        }
        {
          "tab": "Tab 2",
          "groups": [
            {
              "group": "Group 2",
              "pages": [
                "some-other-folder/file-1",
                "various-different-folders/file-2",
                "another-file"
              ]
            }
          ]
        }
      ]
    }
  }
  ```
</CodeGroup>

## Global Links

If you want to use tabs or anchors solely for the purpose of listing external links use the `navigation.global` property.

```json theme={null}
"navigation": {
  "global": {
    "anchors": [
      {
        "anchor": "Slack",
        "icon": "slack",
        "href": "https://slack.com
      },
      {
        "anchor": "API Reference",
        "icon": "code",
        "href": "https://api-reference.com"
      }
    ]
  }
}
```

### Hidden Pages

MDX files not included in `docs.json` will not show up in the sidebar but are
accessible by linking directly to them.

Hidden pages are not indexed for search within your docs by default. If you
would like to override this behavior, you can set the
[`seo.indexing`](/settings/global#param-indexing) attribute
in your `docs.json` to `navigable`.

## Navbar

### Links

Add links to the topbar with the `links` field in the `docs.json` file.

<Frame>
  <img className="block rounded-md" src="https://mintcdn.com/aihubmix/UgvkHPDoK6o04763/images/topbar-links.png?fit=max&auto=format&n=UgvkHPDoK6o04763&q=85&s=bf6cf7d68e3fe65547882d00a7948ebd" width="2968" height="1258" data-path="images/topbar-links.png" />
</Frame>

The `links` field supports the following fields: `label`, `href`.

```json theme={null}
"navbar": {
  "links": [
    {
      "label": "Community",
      "href": "https://mintlify.com/community"
    }
  ]
}
```

### Primary Button

Customize the primary button in the topbar using the `primary`
field.

<Frame>
  <img className="block rounded-md" src="https://mintcdn.com/aihubmix/UgvkHPDoK6o04763/images/topbar-cta-get-started.png?fit=max&auto=format&n=UgvkHPDoK6o04763&q=85&s=b008bc173a4a5b4ce7426ba5d797b10c" width="2992" height="1130" data-path="images/topbar-cta-get-started.png" />
</Frame>

The `primary` field supports the following fields: `label`, `href`, `type`. For more information on the options for these fields, see the [docs.json schema](/settings/global#param-navbar).

```json theme={null}
"navbar": {
  "primary": {
    "type": "button",
    "label": "Get Started",
    "href": "https://mintlify.com/get-started"
  }
}
```

#### GitHub

You can also configure the CTA button to link directly to your GitHub
repository. Use the `primary` field with the `type` set to `github`.

<Frame>
  <img className="block rounded-md" src="https://mintcdn.com/aihubmix/UgvkHPDoK6o04763/images/topbar-cta-github.png?fit=max&auto=format&n=UgvkHPDoK6o04763&q=85&s=606af3246f809aace8bd3a53d2de33e5" width="2976" height="1386" data-path="images/topbar-cta-github.png" />
</Frame>

```json theme={null}
"navbar": {
  "primary": {
    "type": "github",
    "label": "GitHub",
    "href": "https://github.com/mintlify/docs"
  }
}
```