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.

{
  "navigation": {
    "pages": [
      "overview",
      "quickstart",
      "advanced/components",
      "advanced/integrations"
    ]
  }
}

​
Groups

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

{
  "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.

docs.json
"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.

The configuration is very similar to the tab configuration.

docs.json
"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.

{
  "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"
            ]
          }
        ]
      }
    ]
  }
}

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

"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 attribute in your docs.json to navigable.

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

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

"navbar": {
  "links": [
    {
      "label": "Community",
      "href": "https://mintlify.com/community"
    }
  ]
}

​
Primary Button

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

The primary field supports the following fields: label, href, type. For more information on the options for these fields, see the docs.json schema.

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

"navbar": {
  "primary": {
    "type": "github",
    "label": "GitHub",
    "href": "https://github.com/mintlify/docs"
  }
}

Was this page helpful?