A propriedade navigation em docs.json controla a estrutura e a hierarquia de informações da sua documentação. Com uma configuração de navegação adequada, você pode organizar seu conteúdo para que os usuários encontrem exatamente o que estão procurando.

​
Páginas

As páginas são o componente de navegação mais fundamental. Elas correspondem aos arquivos MDX que compõem sua documentação. No objeto navigation, pages é um array em que cada entrada deve referenciar o caminho para um arquivo de página. 
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}

​
Grupos

Use grupos para organizar a navegação da barra lateral em seções. Os grupos podem ser aninhados, rotulados com tags e estilizados com ícones. No objeto navigation, groups é um array em que cada entrada é um objeto que exige um campo group e um campo pages. Os campos icon, tag e expanded são opcionais. 
{
  "navigation": {
    "groups": [
      {
        "group": "Getting started",
        "icon": "play",
        "expanded": false,
        "pages": [
          "quickstart",
          {
            "group": "Editing",
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Writing content",
        "icon": "notebook-text",
        "tag": "NEW",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

​
Estado expandido por padrão

Defina expanded: true em um grupo para que ele fique expandido por padrão na barra lateral de navegação. Isso é útil para destacar seções importantes ou melhorar a encontrabilidade de conteúdo essencial. 
{
  "group": "Getting started",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

​
Abas

As abas criam seções distintas na sua documentação, cada uma com um caminho de URL próprio. Elas exibem uma barra de navegação horizontal no topo da documentação, permitindo que os usuários alternem entre seções. No objeto navigation, tabs é um array em que cada item é um objeto que requer o campo tab e pode conter outros campos de navegação, como grupos, páginas, ícones ou links para páginas externas. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "API reference",
        "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"
      }
    ]
  }
}
Menus adicionam itens de navegação em formato de dropdown a uma aba. Use menus para ajudar os usuários a irem diretamente para páginas específicas dentro de uma aba. No objeto navigation, menu é um array em que cada entrada é um objeto que exige um campo item e pode conter outros campos de navegação, como grupos, páginas, ícones ou links para páginas externas. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "Developer tools",
        "icon": "square-terminal",
        "menu": [
          {
            "item": "API reference",
            "icon": "rocket",
            "groups": [
              {
                "group": "Core endpoints",
                "icon": "square-terminal",
                "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"
            ]
          }
        ]
      }
    ]
  }
}

​
Âncoras

Âncoras adicionam itens de navegação persistentes à parte superior da sua barra lateral. Use âncoras para dividir seu conteúdo em seções, fornecer acesso rápido a recursos externos ou criar chamadas para ação em destaque. No objeto navigation, anchors é um array em que cada entrada é um objeto que exige um campo anchor e pode conter outros campos de navegação, como grupos, páginas, ícones ou links para páginas externas. 
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Documentation",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "anchor": "API reference",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "anchor": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
Para âncoras que direcionam apenas a links externos, use a palavra-chave global. Âncoras em um objeto global devem ter um campo href e não podem apontar para um caminho relativo. Âncoras globais são particularmente úteis para criar links para recursos que não fazem parte da sua documentação, mas devem estar facilmente acessíveis aos seus usuários, como um blog ou portal de suporte. 
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Community",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
Os menus suspensos ficam em um menu expansível no topo da navegação da sua barra lateral. Cada item em um menu suspenso direciona para uma seção da sua documentação. No objeto navigation, dropdowns é um array em que cada entrada é um objeto que requer um campo dropdown e pode conter outros campos de navegação, como grupos, páginas, ícones ou links para páginas externas. 
{
  "navigation": {
    "dropdowns": [
      {
        "dropdown": "Documentation",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "dropdown": "API reference",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "dropdown": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}

​
OpenAPI

Integre especificações OpenAPI diretamente à sua estrutura de navegação para gerar a documentação da API automaticamente. Crie seções de API dedicadas ou insira páginas de endpoints em outros componentes de navegação. Defina uma especificação OpenAPI padrão em qualquer nível da hierarquia de navegação. Os elementos filhos herdarão essa especificação, a menos que definam a própria. 
{
  "navigation": {
    "groups": [
      {
        "group": "API reference",
        "openapi": "/path/to/openapi-v1.json",
        "pages": [
          "overview",
          "authentication",
          "GET /users",
          "POST /users",
          {
            "group": "Products",
            "openapi": "/path/to/openapi-v2.json",
            "pages": [
              "GET /products",
              "POST /products"
            ]
          }
        ]
      }
    ]
  }
}
Para saber mais sobre como referenciar endpoints OpenAPI na sua documentação, consulte a configuração do OpenAPI.

​
Versões

Particione sua navegação em diferentes versões. As versões podem ser selecionadas em um menu suspenso. No objeto navigation, versions é um array em que cada entrada é um objeto que exige um campo version e pode conter quaisquer outros campos de navegação. 
{
  "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"]
          }
        ]
      }
    ]
  }
}

​
Idiomas

Divida sua navegação por idioma. Os idiomas podem ser selecionados em um menu suspenso. No objeto navigation, languages é um array em que cada item é um objeto que exige o campo language e pode conter quaisquer outros campos de navegação. Atualmente, oferecemos suporte aos seguintes idiomas para localização:

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"]
          }
        ]
      }
    ]
  }
}
Para traduções automatizadas, entre em contato com nossa equipe de vendas para discutir soluções.

​
Aninhamento

Você pode usar qualquer combinação de âncoras, abas e menus suspensos. Os componentes podem ser aninhados entre si de forma intercambiável para criar a estrutura de navegação desejada. 
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
Breadcrumbs exibem o caminho completo de navegação no topo das páginas. Alguns temas têm breadcrumbs ativados por padrão e outros não. Você pode controlar se os breadcrumbs estão ativados no seu site usando a propriedade styling no seu docs.json. 
"styling": {
  "eyebrows": "breadcrumbs"
}

​
Configuração de interação

Controle como os usuários interagem com os elementos de navegação usando a propriedade interaction no seu docs.json.

​
Ativar navegação automática para grupos

Quando um usuário expandir um grupo de navegação, alguns temas navegarão automaticamente para a primeira página do grupo. Você pode substituir o comportamento padrão do tema usando a opção drilldown: 
{
  "interaction": {
    "drilldown": true  // Forçar a navegação para a primeira página quando um usuário expandir um menu suspenso
  }
}

{
  "interaction": {
    "drilldown": false // Nunca navegar, apenas expandir/recolher
  }
}
  • Defina como true para forçar a navegação automática para a primeira página quando um grupo de navegação for selecionado.
  • Defina como false para evitar a navegação e apenas expandir ou recolher o grupo quando ele for selecionado.
  • Deixe sem definir para usar o comportamento padrão do tema.