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

​
Páginas

Las páginas son el componente de navegación más fundamental. Las páginas corresponden a los archivos MDX que conforman tu documentación. Gráfico decorativo de páginas. En el objeto navigation, pages es un arreglo en el que 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 tu barra lateral en secciones. Los grupos pueden anidarse entre sí, etiquetarse con tags y personalizarse con iconos. Gráfico decorativo de grupos. En el objeto navigation, groups es un arreglo en el que 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": "Escribiendo contenido",
        "icon": "notebook-text",
        "tag": "NUEVO",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

​
Estado expandido por defecto

Establece expanded: true en un grupo para que se muestre expandido por defecto en la barra lateral de navigation. Esto es útil para resaltar secciones importantes o mejorar el descubrimiento del contenido clave. 
{
  "group": "Comenzar",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

​
Tabs

Las Tabs crean secciones diferenciadas de tu documentación con rutas de URL independientes. Las Tabs generan una barra de navegación horizontal en la parte superior de tu documentación que permite a los usuarios cambiar entre secciones. Gráfico decorativo de una navegación por pestañas. En el objeto navigation, tabs es un array donde cada entrada es un objeto que requiere un campo tab y puede contener otros campos de navegación como groups, pages, icon o enlaces a páginas externas. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "Referencia de API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "tab": "SDK",
        "icon": "code",
        "pages": [
          "sdk/fetch",
          "sdk/create",
          "sdk/delete"
        ]
      },
      {
        "tab": "Blog",
        "icon": "newspaper",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
Los menús añaden elementos de navegación desplegables a una Tab. Usa los menús para ayudar a los usuarios a ir directamente a páginas específicas dentro de una Tab. En el objeto navigation, menu es un array donde cada entrada es un objeto que requiere un campo item y puede incluir otros campos de navegación como groups, pages, icon o enlaces a páginas externas. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "Herramientas para desarrolladores",
        "icon": "square-terminal",
        "menu": [
          {
            "item": "Referencia de API",
            "icon": "rocket",
            "groups": [
              {
                "group": "Endpoints principales",
                "icon": "square-terminal",
                "pages": [
                  "api-reference/get",
                  "api-reference/post",
                  "api-reference/delete"
                ]
              }
            ]
          },
          {
            "item": "SDK",
            "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. Usa anclas para dividir tu contenido, ofrecer acceso rápido a recursos externos o crear llamadas a la acción destacadas. Gráfico decorativo de una navegación con anclas. En el objeto navigation, anchors es un arreglo donde cada entrada es un objeto que requiere un campo anchor y puede contener otros campos de navegación como groups, pages, icons 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 los anclajes que apuntan únicamente a enlaces externos, usa la palabra clave global. Los anclajes dentro de un objeto global deben tener un campo href y no pueden apuntar a una ruta relativa. Los anclajes globales son especialmente útiles para vincular 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": "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ú desplegable en la parte superior de la barra lateral de tu navigation. Cada elemento de un menú desplegable dirige a una sección de tu documentación. Gráfico decorativo de una navigation con menú desplegable. En el objeto navigation, dropdowns es un array donde cada entrada es un objeto que requiere un campo dropdown y puede contener otros campos de navegación como groups, pages, icons o enlaces a páginas externas. 
{
  "navigation": {
    "dropdowns": [
      {
        "dropdown": "Documentación",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "dropdown": "Referencia de API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "dropdown": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}

​
Productos

Gráfico decorativo de un selector de productos. Los productos crean una sección de navegación dedicada para organizar la documentación específica de cada producto. Usa productos para separar distintas ofertas, servicios o conjuntos de funciones principales dentro de tu documentación. En el objeto navigation, products es un arreglo donde cada entrada es un objeto que requiere un campo product y puede contener otros campos de navegación como groups, pages, icons o enlaces a páginas externas. 
{
  "navigation": {
    "products": [
      {
        "product": "Core API",
        "description": "Descripción de la API principal",    
        "icon": "api",
        "groups": [
          {
            "group": "Primeros pasos",
            "pages": [
              "core-api/quickstart",
              "core-api/authentication"
            ]
          },
          {
            "group": "Endpoints",
            "pages": [
              "core-api/users",
              "core-api/orders"
            ]
          }
        ]
      },
      {
        "product": "Plataforma de Analytics",
        "description": "Descripción de la Plataforma de Analytics",
        "icon": "chart-bar",
        "pages": [
          "analytics/overview",
          "analytics/dashboard",
          "analytics/reports"
        ]
      },
      {
        "product": "SDK móvil",
        "description": "Descripción del SDK móvil",
        "icon": "smartphone",
        "href": "https://mobile-sdk-docs.example.com"
      }
    ]
  }
}

​
OpenAPI

Integra especificaciones de OpenAPI directamente en tu estructura de navegación para generar automáticamente la documentación de tu API. Crea secciones de API dedicadas o coloca páginas de endpoints dentro de otros componentes de la navegación. Configura una especificación de OpenAPI predeterminada en cualquier nivel de tu jerarquía de navegación. Los elementos descendientes heredarán esta especificación a menos que definan la suya propia. 
{
  "navigation": {
    "groups": [
      {
        "group": "Referencia de 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 hacer referencia a endpoints de OpenAPI en tu documentación, consulta la configuración de OpenAPI.

​
Versiones

Divide tu navigation en diferentes versiones. Puedes seleccionar la versión desde un menú desplegable. Gráfico decorativo de un selector de versión. En el objeto navigation, versions es un array en el que 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": "Primeros pasos",
            "pages": ["v1/overview", "v1/quickstart", "v1/development"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "groups": [
          {
            "group": "Primeros pasos",
            "pages": ["v2/overview", "v2/quickstart", "v2/development"]
          }
        ]
      }
    ]
  }
}

​
Idiomas

Divide tu navigation en distintos idiomas. Los idiomas se seleccionan desde un menú desplegable. Gráfico decorativo de un selector de idioma. En el objeto navigation, languages es un arreglo en el que cada entrada es un objeto que requiere el campo language y puede incluir cualquier otro campo de navigation. Actualmente admitimos los siguientes idiomas para la localización:
https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/ar.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=0e54e1e0eea40180de5739f83ca33455

Árabe (ar)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/cn.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=33f62eeb89ef6dfa3430e72204c3c8cb

Chino (cn)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/cn.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=33f62eeb89ef6dfa3430e72204c3c8cb

Chino (zh-Hant)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/nl.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=171abd46a4a3ba6e9dbacd89766c2bb4

Neerlandés (nl)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/en.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=ff0deb8401f862991cf331b652f15dd0

Inglés (en)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/fr.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=93ad783167c217071c15b1ecd6f1bf12

Francés (fr)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/de.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=85e085603f8bac1d166e9b18f0af18ac

Alemán (de)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/id.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=1fbd5a6191a4f905b1b95f2488b39823

Indonesio (id)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/it.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=7886737e846aa43762c74e1ccd501cab

Italiano (it)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/jp.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=646c623a0cd3fa73d655989fe93fd9f4

Japonés (jp)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/ko.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=09488e367ed786a264a46f6a49c739b1

Coreano (ko)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/lv.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=43392d3f7f07520a84027f0bf2632e85

Letón (lv)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/no.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=17798002ee05046652df24ec410dba62

Noruego (no)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/pt-br.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=c2de3a7b1e8522f2ebc297213a87738c

Portugués (pt-BR)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/ru.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=8dc0c9e81054128371f7706aeb563b7b

Ruso (ru)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/es.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=1184b7bb6e77440a14e3087b80f1f3cf

Español (es)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/sv.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=c7808b7af76a3adb2ee71374e341d1d7

Sueco (sv)

https://mintcdn.com/leylandscompany/EvKsFCJt3uBghN2h/images/navigation/languages/tr.png?fit=max&auto=format&n=EvKsFCJt3uBghN2h&q=85&s=becba61d8bf3bfbf34052002c2383a4d

Turco (tr)

{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "groups": [
          {
            "group": "Primeros pasos",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "groups": [
          {
            "group": "Primeros pasos",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
Para traducciones automatizadas, comunícate con nuestro equipo de ventas para analizar soluciones.

​
Anidación

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

​
Configuración de la interacción

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

​
Habilitar la navegación automática para grupos

Cuando un usuario expande un grupo de navigation, algunos temas navegarán automáticamente a la primera página del grupo. Puedes anular el comportamiento predeterminado del tema usando la opción drilldown.
  • Configúralo en true para forzar la navegación automática a la primera página cuando se selecciona un grupo de navigation.
  • Configúralo en false para evitar la navegación y solo 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 menú desplegable
}