> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-i-to-quickstart-8818.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Navegación
> Estructura y personaliza la jerarquía de navegación de tu documentación
La propiedad [navigation](es/settings#param-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](es/pages).
```json
{
"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.
```json
{
"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.
```json
{
"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.
```json
{
"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.
```json
{
"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.
```json
{
"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.
```json
{
"navigation": {
"global": {
"anchors": [
{
"anchor": "Comunidad",
"icon": "house",
"href": "https://slack.com"
},
{
"anchor": "Blog"
"icon": "pencil",
"href": "https://mintlify.com/blog"
}
]
},
"tabs": /*...*/
}
}
```
## Menús desplegables
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.
```json
{
"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.
```json
{
"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](/es/api-playground/openapi-setup).
## 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.
```json
{
"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:
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
```json
{
"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](mailto:gtm@mintlify.com) 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.
```json Anchors
{
"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"
]
}
]
}
]
}
}
```
```json Tabs
{
"navigation": {
"tabs": [
{
"tab": "Tab 1",
"groups": [
{
"group": "Group 1",
"pages": [
"some-folder/file-1",
"another-folder/file-2",
"just-a-file"
]
}
]
},
{
"tab": "Tab 2",
"groups": [
{
"group": "Group 2",
"pages": [
"some-other-folder/file-1",
"various-different-folders/file-2",
"another-file"
]
}
]
}
]
}
}
```
```json Tabs with external anchor
{
"navigation": {
"global": {
"anchors": [
{
"anchor": "Anchor 1",
"href": "https://mintlify.com/docs"
}
]
},
"tabs": [
{
"tab": "Tab 1",
"groups": [
{
"group": "Group 1",
"pages": [
"some-folder/file-1",
"another-folder/file-2",
"just-a-file"
]
}
]
},
{
"tab": "Tab 2",
"groups": [
{
"group": "Group 2",
"pages": [
"some-other-folder/file-1",
"various-different-folders/file-2",
"another-file"
]
}
]
}
]
}
}
```
## Breadcrumbs
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`.
```json Display full breadcrumbs
"styling": {
"eyebrows": "breadcrumbs"
}
```
```json Display parent section only
"styling": {
"eyebrows": "section"
}
```
## 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.
```json Force navigation
"interaction": {
"drilldown": true // Forzar la navegación a la primera página cuando un usuario expande un grupo
}
```
```json Prevent navigation
"interaction": {
"drilldown": false // No navegar nunca; solo expandir o contraer el grupo
}
```