> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Navigation
> 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 la 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. Cada página corresponde a un archivo MDX que compone tu documentación.
En el objeto `navigation`, `pages` es un array donde cada elemento debe referenciar la ruta a un [archivo de página](es/pages).
```json theme={null}
{
"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 etiquetas y personalizarse 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 theme={null}
{
"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": "NEW",
"pages": [
"writing-content/page",
"writing-content/text"
]
}
]
}
}
```
### Estado expandido predeterminado
Configura `expanded: true` en un grupo para que se muestre expandido de forma predeterminada en la barra lateral de navigation. Esto es útil para resaltar secciones importantes o mejorar la facilidad de descubrimiento del contenido clave.
```json theme={null}
{
"group": "Comenzar",
"expanded": true,
"pages": ["quickstart", "installation"]
}
```
## Tabs
Tabs crean secciones diferenciadas de tu documentación con rutas de URL separadas. Tabs 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 elemento es un objeto que requiere un campo `tab` y puede incluir otros campos de navegación como groups, pages, icon o enlaces a páginas externas.
```json theme={null}
{
"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 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 arreglo donde cada entrada es un objeto que requiere un campo `item` y puede contener otros campos de navegación como groups, pages, icons o enlaces a páginas externas.
```json theme={null}
{
"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 agregan elementos de navegación persistentes en la parte superior de la 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 en el que cada entrada es un objeto que requiere un campo `anchor` y puede incluir otros campos de navegación como groups, páginas, iconos o enlaces a páginas externas.
```json theme={null}
{
"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 dirigen ú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 enlazar a 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.
```json theme={null}
{
"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 están en un menú desplegable en la parte superior de la barra lateral de la navegación. Cada elemento del menú 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 el campo `dropdown` y puede incluir otros campos de navegación como groups, pages, icon, o enlaces a páginas externas.
```json theme={null}
{
"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"
}
]
}
}
```
## OpenAPI
Integra especificaciones de OpenAPI directamente en tu estructura de navigation 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 navigation.
Define una especificación de OpenAPI predeterminada en cualquier nivel de tu jerarquía de navigation. Los elementos hijos heredarán esta especificación a menos que definan la suya propia.
```json theme={null}
{
"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 más información sobre cómo hacer referencia a endpoints de OpenAPI en tu documentación, consulta la [configuración de OpenAPI](/es/api-playground/openapi-setup).
## Versiones
Divide tu navigation en diferentes versiones. Las versiones se pueden seleccionar desde un menú desplegable.
En el objeto `navigation`, `versions` es un array donde cada entrada es un objeto que requiere un campo `version` y puede contener cualquier otro campo de navigation.
```json theme={null}
{
"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. Se pueden seleccionar desde un menú desplegable.
En el objeto `navigation`, `languages` es un array donde cada elemento 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:
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
```json theme={null}
{
"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](mailto:gtm@mintlify.com) para analizar soluciones.
## Anidación
Puedes usar cualquier combinación de anclas, pestañas y menús desplegables. Los componentes pueden anidarse entre sí de forma intercambiable para crear la estructura de navigation que desees.
```json Anchors theme={null}
{
"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 theme={null}
{
"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 theme={null}
{
"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 completa de navegación en la parte superior de las páginas. Algunos temas tienen los breadcrumbs activados de forma predeterminada y otros no. Puedes controlar si los breadcrumbs están activados para tu sitio usando la propiedad `styling` en tu `docs.json`.
```json Mostrar breadcrumbs completos theme={null}
"styling": {
"eyebrows": "breadcrumbs"
}
```
```json Mostrar solo la sección principal theme={null}
"styling": {
"eyebrows": "section"
}
```
## Configuración de interacción
Controla cómo los usuarios interactúan con los elementos de navegación mediante la propiedad `interaction` en tu `docs.json`.
### Habilitar la navegación automática para 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`.
* Establécelo en `true` para forzar la navegación automática a la primera página cuando se selecciona un grupo de navigation.
* Establécelo 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.
```json Forzar navegación theme={null}
"interaction": {
"drilldown": true // Forzar la navegación a la primera página cuando un usuario expande un menú desplegable
}
```
```json Evitar navegación theme={null}
"interaction": {
"drilldown": false // No navegar nunca; solo expandir o contraer el grupo
}
```