The navigation property in docs.json defines how users will browse through your documentation. Think of it as the blueprint for your documentation’s menu structure. With proper navigation configuration, you can organize your content into a logical hierarchy that makes it easy for users to find exactly what they’re looking for.
Do not use api or mcp as titles for any navigation element. The /api and /mcp paths are reserved in production and will cause pages to return 404 errors if their URLs contain /api or /mcp.

​
Pages

Pages are the most fundamental navigation component. Pages is an array where each entry must be a reference to the path of a page file. 
{
  "navigation": {
    "pages": [
      "overview",
      "quickstart",
      "advanced/components",
      "advanced/integrations"
    ]
  }
}

​
Groups

Use groups to organize your navigation into sections. Groups can be nested within each other, labeled with tags, and styled with icons. 
{
  "navigation": {
    "groups": [
      {
        "group": "Getting Started",
		"icon": "play",
        "pages": [
          "quickstart",
          {
            "group": "Editing",
			"icon": "pencil",
            "pages": [
				"installation",
				"editor",
				{
					"group": "Nested group",
					"icon": "code",
					"pages": [
						"navigation",
						"code"
					]
				}
			]
          }
        ]
      },
      {
        "group": "Writing Content",
 		"icon": "notebook-text",
        "tag": "NEW",
        "pages": ["writing-content/page", "writing-content/text"]
      }
    ]
  }
}

​
Tabs

Tabs help distinguish between different topics or sections of your documentation. 
"navigation": {
  "tabs": [
    {
      "tab": "API References",
      "icon": "square-terminal",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    },
    {
      "tab": "SDKs",
      "icon": "code",
      "pages": [
        "sdk/fetch",
        "sdk/create",
        "sdk/delete",
      ]
    },
    {
      "tab": "Blog",
      "icon": "newspaper",
      "href": "https://external-link.com/blog"
    }
  ]
}
Tabs can have menus that display dropdown navigation items that let users go directly to specific sections within a tab. 
"navigation": {
  "tabs": [
    {
      "tab": "API References",
      "icon": "square-terminal",
      "menu": [
        {
          "item": "API References",
          "icon": "rocket",
          "pages": [
            "api-reference/get",
            "api-reference/post",
            "api-reference/delete"
          ]
        },
        {
          "item": "SDKs",
          "icon": "code",
          "description": "SDKs are used to interact with the API.",
          "pages": [
            "sdk/fetch",
            "sdk/create",
            "sdk/delete",
          ]
        }
      ]
    }
  ]
}

​
Anchors

Anchors are another way to section your content. They show up on top of your side navigation. The configuration is very similar to tabs. While not required, we highly recommend that you set an icon field as well. 
"navigation": {
  "anchors": [
    {
      "anchor": "Documentation",
      "icon": "book-open",
      "pages": [
        "quickstart",
        "development",
        "navigation"
      ]
    },
    {
      "anchor": "API References",
      "icon": "square-terminal",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    },
    {
      "anchor": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}
Anchors that strictly contain external links can be achieved using the global keyword: 
"navigation": {
  "global":  {
    "anchors": [
      {
         "anchor": "Community",
         "icon": "house",
         "href": "https://slack.com"
      },
      {
         "anchor": "Blog",
         "icon": "pencil",
         "href": "https://mintlify.com/blog"
      }
    ]
  },
  "tabs": /*...*/
}
Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown. While not required, we also recommend that you set an icon for each dropdown item. 
"navigation": {
  "dropdowns": [
    {
      "dropdown": "Documentation",
      "icon": "book-open",
      "pages": [
        "quickstart",
        "development",
        "navigation"
      ]
    }
    {
      "dropdown": "API References",
      "icon": "square-terminal",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    }
    {
      "dropdown": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}

​
Versions

Partition your navigation into different versions. 
{
  "navigation": {
    "versions": [
      {
        "version": "1.0.0",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["v1/overview", "v1/quickstart", "v1/development"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["v2/overview", "v2/quickstart", "v2/development"]
          }
        ]
      }
    ]
  }
}

​
Languages

Partition your navigation into different languages. We currently support the following languages:

Arabic (ar)

Chinese (cn)

Chinese (zh-Hant)

English (en)

French (fr)

German (de)

Indonesian (id)

Italian (it)

Japanese (jp)

Korean (ko)

Portuguese (pt-BR)

Russian (ru)

Spanish (es)

Turkish (tr)

{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}

​
Nesting

You can use any combination of anchors, tabs, and dropdowns. The components can be nested within each other interchangeably to create your desired navigation structure. 
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
Control how breadcrumbs display on individual pages to orient users in your documentation. 
{
  "styling": {
    "eyebrows": "breadcrumbs"
  }
}