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

# Tabs, Anchors, Dropdowns

## 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. They show up on top of your side navigation.

<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. We highly recommend that you set an `icon` field as well.
Valid icon values include all named [Font Awesome](https://fontawesome.com/icons) and [Lucide](https://lucide.dev/icons) icons.

```json docs.json theme={null}
"navigation": {
  "anchors": [
    {
      "anchor": "Documentation",
      "icon": "book-open",
      "pages": [
        "quickstart",
        "development",
        "navigation"
      ]
    }
    {
      "anchor": "API References",
      "icon": "sqaure-terminal",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    }
    {
      "anchor": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}
```

## Dropdowns

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

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

Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
We also recommend that you set an icon for each dropdown item (from [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons)).

```json docs.json theme={null}
"navigation": {
  "dropdowns": [
    {
      "dropdown": "Documentation",
      "icon": "book-open",
      "pages": [
        "quickstart",
        "development",
        "navigation"
      ]
    }
    {
      "dropdown": "API References",
      "icon": "sqaure-terminal",
      "pages": [
        "api-reference/get",
        "api-reference/post",
        "api-reference/delete"
      ]
    }
    {
      "dropdown": "Blog",
      "href": "https://external-link.com/blog"
    }
  ]
}
```

## Nested Hierarchy

You can use any combination of anchors, tabs, and dropdowns - 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>