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. Elige un único patrón de organización principal para el nivel raíz de tu navegación. Una vez que hayas elegido tu patrón principal, puedes anidar otros elementos de navegación dentro de él.

Páginas

Las páginas son el componente más fundamental de la navegación. Cada página es un archivo MDX en el repositorio de tu documentación. Gráfico decorativo de páginas. 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. Puedes anidar grupos entre sí, etiquetarlos con etiquetas y aplicar estilos con iconos. Gráfico decorativo de grupos. En el objeto navigation, groups es un array en el que cada entrada es un objeto que requiere un campo group y un campo pages. Los campos icon, tag, root y expanded son opcionales.
{
  "navigation": {
    "groups": [
      {
        "group": "Primeros pasos",
        "icon": "play",
        "pages": [
          "quickstart",
          {
            "group": "Edición",
            "expanded": false,
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Escritura de contenido",
        "icon": "notebook-text",
        "tag": "NEW",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

Página raíz

Usa la propiedad root para designar una página principal para un grupo. Cuando un grupo tiene una página raíz, al hacer clic en el título del grupo en la barra lateral de navegación se abre la página raíz. Las páginas raíz funcionan tanto para grupos de nivel superior como para grupos anidados.
Example group with a root page
{
  "navigation": {
    "groups": [
      {
        "group": "Páginas de API",
        "root": "api-overview",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      }
    ]
  }
}

Estado expandido predeterminado

Usa la propiedad expanded para controlar el estado predeterminado de un grupo anidado en la barra lateral de navigation.
  • expanded: true: el grupo se muestra expandido de forma predeterminada.
  • expanded: false o si se omite: el grupo se muestra contraído de forma predeterminada.
La propiedad expanded solo afecta a los grupos anidados (grupos dentro de otros grupos). Los grupos de nivel superior siempre están expandidos y no se pueden contraer.
{
  "group": "Primeros pasos",
  "pages": [
    "quickstart",
    {
      "group": "Avanzado",
      "expanded": false,
      "pages": ["installation", "configuration"]
    }
  ]
}

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. Los elementos de menú solo pueden contener groups, pages y enlaces externos.
{
  "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 array 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"
      }
    ]
  }
}

Anclajes globales

Usa anclajes globales para enlaces que deben aparecer en todas las páginas, independientemente de qué sección de tu navigation esté viendo el usuario. Los anclajes globales son especialmente útiles para vincular recursos fuera de tu documentación, como un blog, un foro de la comunidad o un portal de soporte, o para proporcionar un acceso coherente a páginas internas importantes (como una página de cambios o de estado). Los anclajes globales admiten tanto URL externas como rutas relativas a páginas dentro de tu documentación.
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Cambios",
          "icon": "list",
          "href": "/changelog"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}

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"
      }
    ]
  }
}
Los menús desplegables constituyen 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": "Documentation",
        "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"
      }
    ]
  }
}

OpenAPI

Integra especificaciones de OpenAPI directamente en la 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 navegación. Configura una especificación de OpenAPI predeterminada en cualquier nivel de tu jerarquía de navegación. Los elementos secundarios heredan la especificación a menos que definan la suya propia.
Cuando agregas la propiedad openapi a un elemento de navegación (como un anchor, tab o group) sin especificar ninguna página, Mintlify genera automáticamente páginas para todos los endpoints definidos en tu especificación de OpenAPI.Para controlar qué endpoints aparecen, enumera explícitamente los endpoints deseados en un arreglo pages.
Para obtener más información sobre cómo hacer referencia a endpoints de OpenAPI en tu documentación, consulta la sección Configuración de OpenAPI.
{
  "navigation": {
    "groups": [
      {
        "group": "Referencia de la API",
        "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"
            ]
          }
        ]
      }
    ]
  }
}

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"]
          }
        ]
      }
    ]
  }
}

Versión predeterminada

Mintlify usa la primera versión del array versions como predeterminada. Usa el campo default para especificar una versión diferente como predeterminada.
{
  "navigation": {
    "versions": [
      {
        "version": "1.0.0",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["v1/overview", "v1/quickstart"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "default": true,
        "groups": [
          {
            "group": "Getting started",
            "pages": ["v2/overview", "v2/quickstart"]
          }
        ]
      }
    ]
  }
}

Etiquetas de versión

Agrega una insignia a las entradas de versión en el menú desplegable del selector de versiones usando el campo opcional tag. Usa etiquetas para resaltar versiones específicas como «Última», «Recomendada» o «Beta».
{
  "navigation": {
    "versions": [
      {
        "version": "2026_03",
        "tag": "Latest",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["getting-started", "quickstart"]
          }
        ]
      },
      {
        "version": "2025_12",
        "tag": "Recommended",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["2025_12/getting-started", "2025_12/quickstart"]
          }
        ]
      },
      {
        "version": "2025_09",
        "tag": "Deprecated",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["2025_09/getting-started", "2025_09/quickstart"]
          }
        ]
      }
    ]
  }
}

Idiomas

Divide tu navegación en diferentes idiomas. Los idiomas se pueden seleccionar desde un menú desplegable. Gráfico decorativo de un selector de idioma. En el objeto navigation, languages es un array donde cada entrada es un objeto que requiere un campo language y puede contener cualquier otro campo de navegación, incluidas configuraciones de banner, footer y navbar específicas por idioma. Actualmente ofrecemos compatibilidad con los siguientes idiomas para la localización:
https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ar.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=9aae4b227518c7b6129a968df2ccc627

Árabe (ar)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ca.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=799f4ba015b6e6225b5d3b7d01612677

Catalán (ca)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/cs.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=b034caab84a86568f80acdc9ae655590

Checo (cs)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/cn.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=0814317777a913dc6d865c42c5773009

Chino (cn)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/cn.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=0814317777a913dc6d865c42c5773009

Chino (zh-Hant)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/nl.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=50c909dc18e7e6303f49c7495cbad18f

Neerlandés (nl)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/en.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=76ba45633efaf5946a4df5db91fe518e

Inglés (en)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/fr.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=2118dc79f31e1676fa266e87a02a6053

Francés (fr)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/de.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=751b88a2b03abfa66cb0aaed374f2ffd

Alemán (de)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/he.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=9250abcb049fdd051d52c343827896da

Hebreo (he)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/hi.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=24c0bf36bd2334947922de2520664850

Hindi (hi)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/hu.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=a81d5dd368ef7148823cfc43f4cf52ee

Húngaro (hu)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/id.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=c661e56e93050a83ca2cbc418cdb5f6b

Indonesio (id)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/it.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=b9331252bc961216825607cf122ae2cb

Italiano (it)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/jp.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=9f14887c85d83bd29e58dc9cedc59386

Japonés (jp)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ko.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=52e145b56b65fb08c1cc5635ecd18f13

Coreano (ko)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/lv.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=3d0690e59153215e8bbc2156801f65c6

Letón (lv)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/no.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=d7cad8cdaaf871071eb64df43e6a0dd3

Noruego (no)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/pl.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=04c43487531a7b187786f0e3b7172c40

Polaco (pl)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/pt-br.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=85e09c46ed756c9cbc0920849345c8a6

Portugués (pt-BR)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ro.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=29a6660ae99afeedddc3527ed740c356

Rumano (ro)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ru.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=c0a4438ac836c046810d93987e680c8f

Ruso (ru)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/es.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=5695099dbf3a980bee1cbfd6ee837fa7

Español (es)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/sv.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=9c32c9be6d0512d1f29a0a32995ae9a2

Sueco (sv)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/tr.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=35204a834c0dd4693015c6a78f217b40

Turco (tr)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/ua.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=9ea16b696c555dd841d54357f54f0151

Ucraniano (ua)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/uz.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=386bcbce8b1faae1340e8d3eda859d1a

Uzbeko (uz)

https://mintcdn.com/mintlify-kyle-mint-export/ug5gTMUGNYbkBBuH/images/navigation/languages/vi.png?fit=max&auto=format&n=ug5gTMUGNYbkBBuH&q=85&s=dd35d578d2079835222e7c15582af59a

Vietnamita (vi)

{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
          "dismissible": true
        },
        "footer": {
          "socials": {
            "x": "https://x.com/mintlify"
          },
          "links": [
            {
              "header": "Resources",
              "items": [
                { "label": "Documentation", "href": "/en/docs" },
                { "label": "Blog", "href": "https://mintlify.com/blog" }
              ]
            }
          ]
        },
        "navbar": {
          "links": [
            { "label": "Docs", "href": "/en/docs" }
          ],
          "primary": {
            "type": "button",
            "label": "Get Started",
            "href": "/en/quickstart"
          }
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog).",
          "dismissible": true
        },
        "footer": {
          "socials": {
            "x": "https://x.com/mintlify"
          },
          "links": [
            {
              "header": "Recursos",
              "items": [
                { "label": "Documentación", "href": "/es/docs" },
                { "label": "Blog", "href": "https://mintlify.com/blog" }
              ]
            }
          ]
        },
        "navbar": {
          "links": [
            { "label": "Documentación", "href": "/es/docs" }
          ],
          "primary": {
            "type": "button",
            "label": "Comenzar",
            "href": "/es/quickstart"
          }
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
Para traducciones automatizadas, contacta con nuestro equipo de ventas para hablar sobre las soluciones disponibles.

Anidación

Puedes anidar elementos de navigation entre sí para crear jerarquías complejas. Debes tener un elemento principal de navigation en el nivel raíz, como pestañas, grupos o un menú desplegable. Puedes anidar otros tipos de elementos de navigation dentro de tu patrón principal de navigation. Cada elemento de navigation puede contener un solo tipo de elemento hijo en cada nivel de tu jerarquía de navigation. Por ejemplo, una pestaña puede contener elementos de anclaje que contienen grupos, pero una pestaña no puede contener tanto elementos de anclaje como grupos en el mismo nivel.
{
  "navigation": {
    "tabs": [
      {
        "tab": "Documentation",
        "anchors": [
          {
            "anchor": "Guides",
            "icon": "book-open",
            "pages": ["quickstart", "tutorial"]
          },
          {
            "anchor": "API Reference",
            "icon": "code",
            "pages": ["api/overview", "api/endpoints"]
          }
        ]
      },
      {
        "tab": "Resources",
        "groups": [
          {
            "group": "Help",
            "pages": ["support", "faq"]
          }
        ]
      }
    ]
  }
}
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 se muestran 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.

Enable auto-navigation for groups

Cuando un usuario expande un grupo de navigation, algunos temas navegan 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 un usuario selecciona un grupo de navigation.
  • Configúralo en false para evitar la navegación y solo expandir o contraer el grupo cuando un usuario selecciona un grupo de navigation.
  • 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
}