La propiedad navigation en docs.json controla la estructura y la jerarquía de información de tu documentación. Con una configuración de navegación adecuada, puedes organizar tu contenido para que los usuarios encuentren exactamente lo que están buscando.

​
Páginas

Las páginas son el componente de navegación más fundamental. Las páginas corresponden a los archivos MDX que componen tu documentación. En el objeto navigation, pages es un array donde cada entrada debe hacer referencia a la ruta de un archivo de página. 
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}

​
Grupos

Usa grupos para organizar la navegación de la barra lateral en secciones. Los grupos pueden anidarse, etiquetarse con tags y mostrarse con iconos. En el objeto navigation, groups es un array donde cada entrada es un objeto que requiere un campo group y un campo pages. Los campos icon, tag y expanded son opcionales. 
{
  "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 defecto

Configura expanded: true en un grupo para que aparezca expandido por defecto en la barra lateral de navegación. Esto es útil para destacar secciones importantes o mejorar la facilidad de descubrimiento del contenido clave. 
{
  "group": "Getting started",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

​
Pestañas

Las pestañas crean secciones diferenciadas de tu documentación con rutas de URL independientes. Añaden una barra de navegación horizontal en la parte superior de la documentación que permite a los usuarios cambiar entre secciones. En el objeto navigation, tabs es un array donde cada entrada es un objeto que requiere el campo tab y puede contener otros campos de navegación como grupos, páginas, íconos o enlaces a 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"
      }
    ]
  }
}
Los menús agregan elementos de navegación desplegables a una pestaña. Usa menús para ayudar a los usuarios a ir directamente a páginas específicas dentro de una pestaña. En el objeto navigation, menu es un arreglo en el que cada entrada es un objeto que requiere un campo item y puede contener otros campos de navegación como grupos, páginas, íconos o enlaces a 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": "Los SDK se utilizan para interactuar con la API.",
            "pages": [
              "sdk/fetch",
              "sdk/create",
              "sdk/delete"
            ]
          }
        ]
      }
    ]
  }
}

​
Anclas

Las anclas añaden elementos de navegación persistentes en la parte superior de tu barra lateral. Úsalas para seccionar tu contenido, ofrecer acceso rápido a recursos externos o crear llamadas a la acción destacadas. En el objeto navigation, anchors es un arreglo donde cada entrada es un objeto que requiere un campo anchor y puede incluir otros campos de navegación como grupos, páginas, íconos o enlaces a 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 anclas que dirigen únicamente a enlaces externos, utiliza la palabra clave global. Las anclas en un objeto global deben tener un campo href y no pueden apuntar a una ruta relativa. Las anclas globales son especialmente útiles para enlazar recursos que no forman parte de tu documentación, pero que deberían estar fácilmente accesibles para tus usuarios, como un blog o un portal de soporte. 
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Community",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
Los menús desplegables se encuentran en un menú expandable en la parte superior de la barra lateral de navegación. Cada elemento de un menú desplegable dirige a una sección de tu documentación. En el objeto navigation, dropdowns es un arreglo donde cada entrada es un objeto que requiere un campo dropdown y puede incluir otros campos de navegación como grupos, páginas, iconos o enlaces a 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

Integra especificaciones de OpenAPI directamente en tu estructura de navegación para generar documentación de API de forma automática. Crea secciones de API dedicadas o coloca páginas de endpoints dentro de otros componentes de navegación. Establece una especificación de OpenAPI predeterminada en cualquier nivel de la jerarquía de navegación. Los elementos descendientes heredarán esta especificación, a menos que definan la suya propia. 
{
  "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 obtener más información sobre cómo hacer referencia a endpoints de OpenAPI en tu documentación, consulta la configuración de OpenAPI.

​
Versiones

Divide la navegación en distintas versiones. Puedes seleccionar la versión desde un menú desplegable. En el objeto navigation, versions es un arreglo donde cada entrada es un objeto que requiere un campo version y puede contener cualquier otro campo de navegación. 
{
  "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

Divide la navegación en diferentes idiomas. Los idiomas se pueden seleccionar desde un menú desplegable. En el objeto navigation, languages es un arreglo donde cada entrada es un objeto que requiere un campo language y puede incluir cualquier otro campo de navegación. Actualmente admitimos los siguientes idiomas para la localización:

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 traducciones automáticas, contacta a nuestro equipo de ventas para analizar soluciones.

​
Anidación

Puedes usar cualquier combinación de anclajes, pestañas y menús desplegables. Los componentes se pueden anidar entre sí de forma intercambiable para crear la estructura de navegación que necesites. 
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
Los breadcrumbs muestran la ruta de navegación completa en la parte superior de las páginas. Algunos temas los habilitan de forma predeterminada y otros no. Puedes controlar si los breadcrumbs están habilitados para tu sitio usando la propiedad styling en tu docs.json. 
"styling": {
  "eyebrows": "breadcrumbs"
}

​
Configuración de la interacción

Controla cómo interactúan los usuarios con los elementos de navegación mediante la propiedad interaction en tu docs.json.

​
Habilitar la navegación automática para grupos

Cuando un usuario expande un grupo de navegación, algunos temas navegarán automáticamente a la primera página del grupo. Puedes anular el comportamiento predeterminado de un tema usando la opción drilldown: 
{
  "interaction": {
    "drilldown": true  // Forzar la navegación a la primera página cuando un usuario expande un menú desplegable
  }
}

{
  "interaction": {
    "drilldown": false // No navegar nunca; solo expandir o contraer
  }
}
  • Configura en true para forzar la navegación automática a la primera página cuando se selecciona un grupo de navegación.
  • Configura en false para evitar la navegación y solo expandir o contraer el grupo cuando se selecciona.
  • Déjalo sin configurar para usar el comportamiento predeterminado del tema.