Saltar al contenido principal
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. Corresponden a los archivos MDX que componen tu documentación. En el objeto navigation, pages es una matriz donde cada entrada debe hacer referencia a la ruta de un archivo de página.
{
  "navigation": {
    "pages": [
      "configuración",
      "páginas",
      "navegación",
      "temas",
      "dominio-personalizado"
    ]
  }
}

Grupos

Usa grupos para organizar la navegación de la barra lateral en secciones. Los grupos se pueden anidar, etiquetar con etiquetas y personalizar con iconos. En el objeto navigation, groups es un arreglo 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": "Primeros pasos",
        "icon": "play",
        "expanded": false,
        "pages": [
          "quickstart",
          {
            "group": "Edición",
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Creación de contenido",
        "icon": "notebook-text",
        "tag": "NUEVO",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

Estado expandido predeterminado

Establece expanded: true en un grupo para que aparezca expandido de forma predeterminada en la barra lateral de navegación. Esto es útil para resaltar secciones importantes o mejorar la detectabilidad del contenido clave.
{
  "group": "Introducción",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

Pestañas

Las pestañas crean secciones diferenciadas de tu documentación con rutas de URL independientes. También generan una barra de navegación horizontal en la parte superior de tu documentación que permite a los usuarios cambiar entre secciones. En el objeto navigation, tabs es un arreglo donde cada entrada es un objeto que requiere el campo tab y puede contener otros campos de navegación como grupos, páginas, iconos o enlaces a páginas externas.
{
  "navigation": {
    "tabs": [
      {
        "tab": "Referencia de la API",
        "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 donde cada entrada es un objeto que requiere un campo item y puede contener otros campos de navegación como grupos, páginas, iconos o enlaces a páginas externas.
{
  "navigation": {
    "tabs": [
      {
        "tab": "Herramientas de desarrollo",
        "icon": "square-terminal",
        "menu": [
          {
            "item": "Referencia de la API",
            "icon": "rocket",
            "groups": [
              {
                "group": "Endpoints principales",
                "icon": "square-terminal",
                "pages": [
                  "api-reference/get",
                  "api-reference/post",
                  "api-reference/delete"
                ]
              }
            ]
          },
          {
            "item": "SDKs",
            "icon": "code",
            "description": "Los SDKs se usan 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 dividir tu contenido, proporcionar acceso rápido a recursos externos o crear llamadas a la acción destacadas. En el objeto navigation, anchors es un array donde cada entrada es un objeto que requiere un campo anchor y puede incluir otros campos de navegación como grupos, páginas, iconos o enlaces a páginas externas.
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Documentación",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "anchor": "Referencia de la API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "anchor": "Blog"
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
Para anclas que apunten solo a enlaces externos, usa la palabra clave global. Las anclas dentro de un objeto global deben tener un campo href y no pueden apuntar a una ruta relativa. Las anclas globales son especialmente útiles para enlazar a recursos que no forman parte de tu documentación, pero que deberían ser fácilmente accesibles para tus usuarios, como un blog o un portal de soporte.
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Comunidad",
          "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ú expandible en la parte superior de la barra lateral de navegación. Cada elemento de un menú desplegable lleva 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 contener otros campos de navegación como grupos, páginas, íconos o enlaces a páginas externas.
{
  "navigation": {
    "dropdowns": [
      {
        "dropdown": "Documentación",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "dropdown": "Referencia de la API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "dropdown": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}

OpenAPI

Integra especificaciones OpenAPI directamente en tu estructura de navegación para generar automáticamente la documentación de tu API. Crea secciones de API dedicadas o ubica páginas de endpoints dentro de otros componentes de navegación. Establece una especificación OpenAPI predeterminada en cualquier nivel de tu jerarquía de navegación. Los elementos secundarios heredarán esta especificación a menos que definan la suya propia.
{
  "navigation": {
    "groups": [
      {
        "group": "Referencia de la API",
        "openapi": "/path/to/openapi-v1.json",
        "pages": [
          "overview",
          "authentication",
          "GET /users",
          "POST /users",
          {
            "group": "Productos",
            "openapi": "/path/to/openapi-v2.json",
            "pages": [
              "GET /products",
              "POST /products"
            ]
          }
        ]
      }
    ]
  }
}
Para obtener más información sobre cómo referenciar endpoints de OpenAPI en tu documentación, consulta la configuración de OpenAPI.

Versiones

Divide tu navegación en diferentes versiones. Puedes seleccionar la versión desde un menú desplegable. En el objeto navigation, versions es un array donde cada elemento 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": "Introducción",
            "pages": ["v1/overview", "v1/quickstart", "v1/development"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "groups": [
          {
            "group": "Introducción",
            "pages": ["v2/overview", "v2/quickstart", "v2/development"]
          }
        ]
      }
    ]
  }
}

Idiomas

Divide tu navegación por idiomas. Puedes seleccionarlos desde un menú desplegable. En el objeto navigation, languages es un arreglo donde cada elemento 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": "Introducción",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "groups": [
          {
            "group": "Introducción",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
Para traducciones automatizadas, ponte en contacto con nuestro equipo de ventas para analizar soluciones.

Anidamiento

Puedes usar cualquier combinación de anclas, pestañas y menús desplegables. Los componentes pueden anidarse entre sí de manera 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 tienen habilitados 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 con la opción drilldown.
  • Configura en true para forzar la navegación automática a la primera página al seleccionar un grupo de navegación.
  • Configura en false para impedir la navegación y únicamente expandir o contraer el grupo al seleccionarlo.
  • Déjalo sin configurar para usar el comportamiento predeterminado del tema.
"interaction": {
  "drilldown": true  // Forzar la navegación a la primera página cuando un usuario expande un grupo
}