Navigation

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

Tabs

Tabs help distinguish between different topics or sections of your documentation. They show up above the main sidebar.

Configure tabs with the tabs field of the mint.json file. The url field of the tab object should map to a folder of content added to your sidebar, or an external link.

"tabs": [
    {
        "name": "API References",
        "url": "api-references"
    },
    {
        "name": "Content",
        "url": "content"
    },
    {
        "name": "Blog",
        "url": "https://your-website.com/blog"
    }
]

To configure the default Documentation primary tab, add the primaryTab field to your mint.json file with your desired name. Any files in your navigation not in a folder reserved by another tab will show up in the primary tab.

"primaryTab": {
    "name": "Home"
}

Anchors

Anchors provide another way to direct users to sections of your documentation, or link out to external URLs.

Configure anchors with the anchors field of the mint.json file. The url field of the tab object should map an external link, or a folder of content added to your sidebar. More fields for anchors can be found here.

"anchors": [
    {
        "name": "API References",
        "icon": "code",
        "url": "api-references"
    },
    {
        "name": "Content",
        "icon": "pencil",
        "url": "content"
    },
    {
        "name": "Contact us",
        "icon": "envelope",
        "url": "https://mintlify.com/contact-us"
    }
]

To configure the default Documentation top anchor, add the topAnchor field to your mint.json.

"topAnchor": {
    "name": "Home",
    "icon": "building"
}

Sidebar

Organize your navigation by defining the navigation property in your mint.json, You don’t need to include .mdx in page names.

Once you add a page to your docs directory, you’ll need to add the path to mint.json to add it to the sidebar. Pages do not show up automatically.

Regular Navigation

"navigation": [
    {
        "group": "Getting Started",
        "pages": ["quickstart"]
    }
]

Groups

Create groups by recursively nesting a group within a group.

Nested Navigation

"navigation": [
    {
        "group": "Getting Started",
        "pages": [
            "quickstart",
            {
                "group": "Nested Reference Pages",
                "pages": ["nested-reference-page"]
            }
        ]
    }
]

Folders

Simply put your MDX files in folders and update the paths in mint.json.

For example, to have a page at https://yoursite.com/your-folder/your-page you would make a folder called your-folder containing an MDX file called your-page.mdx.

You cannot use api for the name of a folder unless you nest it inside another folder. Mintlify uses Next.js which reserves the top-level api folder for internal server calls. We recommend using the folder name api-reference instead.

Hidden Pages

MDX files not included in mint.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.indexHiddenPages attribute in your mint.json to true.

Topbar

Links

Add links to the topbar with the topbarLinks field in the mint.json file.

The topbarLinks field supports the following fields: name, url.

  "topbarLinks": [
    {
      "name": "Community",
      "url": "https://mintlify.com/community"
    }
  ]

CTA Button

Customize the call-to-action (CTA) button in the topbar using the topbarCtaButton field.

The topbarCtaButton field supports the following fields: name, url, type, style, and arrow.

  "topbarCtaButton": {
    "name": "Get Started",
    "url": "https://mintlify.com/get-started"
  }

GitHub

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

  "topbarCtaButton": {
    "type": "github",
    "url": "https://github.com/mintlify/docs"
  }