> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Navegación

> Configura la navegación de tu documentación con grupos, páginas, menús desplegables, pestañas y anclas en docs.json para crear la barra lateral.

La propiedad [navigation](/es/organize/settings-structure#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.

<div id="pages">
  ## Páginas
</div>

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.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/pages-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=d9531be8cc28553992a6513ff09fc6ed" alt="Gráfico decorativo de páginas." width="1184" height="320" data-path="images/navigation/pages-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/pages-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=ec51691241465e13d49afafcd30748f8" alt="Gráfico decorativo de páginas." width="1184" height="320" data-path="images/navigation/pages-dark.png" />

En el objeto `navigation`, `pages` es un array donde cada entrada debe hacer referencia a la ruta de un [archivo de página](/es/organize/pages).

```json theme={null}
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}
```

<div id="mix-standalone-pages-with-groups">
  ### Combina páginas independientes con grupos
</div>

El objeto `navigation` de nivel superior admite un único patrón principal (por ejemplo, `pages` o `groups`), pero el array `pages` de un grupo puede combinar rutas de páginas como cadenas con objetos de grupos anidados. Usa este patrón para colocar una página independiente, como una página de resumen o de bienvenida, encima de otros grupos en la barra lateral.

Envuelve tu navegación en un único grupo de nivel superior y lista la página independiente antes de los grupos anidados:

```json theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Documentation",
        "pages": [
          "overview",
          {
            "group": "Get started",
            "pages": ["quickstart", "installation"]
          },
          {
            "group": "Guides",
            "pages": ["guides/authentication", "guides/deployment"]
          }
        ]
      }
    ]
  }
}
```

En este ejemplo, `overview` aparece como un enlace independiente en la parte superior de la barra lateral, seguido por los grupos `Get started` y `Guides`. También puedes usar la propiedad `root` en un grupo para designar una página de resumen para ese grupo. Consulta [Página raíz](/es/organize/navigation#root-page).

<div id="groups">
  ## Grupos
</div>

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.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/groups-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=393243b71cd60407c0ea883359592699" alt="Gráfico decorativo de grupos." width="1184" height="320" data-path="images/navigation/groups-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/groups-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=834d116249fcd1484808f1a534ea2892" alt="Gráfico decorativo de grupos." width="1184" height="320" data-path="images/navigation/groups-dark.png" />

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.

```json theme={null}
{
  "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"
        ]
      }
    ]
  }
}
```

<div id="root-page">
  ### Página raíz
</div>

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.

```json Example group with a root page theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Páginas de API",
        "root": "api-overview",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      }
    ]
  }
}
```

<div id="directory-listings">
  ### Listados de directorio
</div>

Cuando un grupo tiene una página raíz, puedes generar un listado de directorio en esa página. El listado de directorio muestra las páginas secundarias del grupo y los grupos anidados para ofrecer a los usuarios una vista general del contenido de la sección.

Establece la propiedad `directory` en un grupo, pestaña o en el objeto de nivel superior `navigation` para habilitar los listados de directorio. La propiedad acepta tres valores:

| Valor         | Descripción                                                |
| ------------- | ---------------------------------------------------------- |
| `"accordion"` | Muestra las páginas secundarias en una lista               |
| `"card"`      | Muestra las páginas secundarias como tarjetas horizontales |
| `"none"`      | Deshabilita los listados de directorio (predeterminado)    |

El valor de `directory` se hereda a través de la jerarquía de navegación. Si estableces un valor de `directory` en un elemento padre, el valor se aplica a todos los grupos descendientes a menos que se sobreescriba.

```json Enable accordion directory for a group {6} theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "API reference",
        "root": "api-overview",
        "directory": "accordion",
        "pages": [
          "api-reference/authentication",
          "api-reference/endpoints",
          "api-reference/errors"
        ]
      }
    ]
  }
}
```

```json Enable card directory for all groups {3} theme={null}
{
  "navigation": {
    "directory": "card",
    "groups": [
      {
        "group": "Guides",
        "root": "guides/overview",
        "pages": [
          "guides/quickstart",
          "guides/configuration"
        ]
      }
    ]
  }
}
```

<Note>
  Los listados de directorio solo aparecen en las páginas raíz de grupo. Si un grupo no tiene una propiedad `root`, no puede mostrar un listado de directorio.
</Note>

<div id="default-expanded-state">
  ### Estado expandido predeterminado
</div>

Usa la propiedad `expanded` para controlar el estado predeterminado de un grupo anidado en la barra lateral de navigation.

* `expanded: true`: expande el grupo de forma predeterminada.
* `expanded: false` o si se omite: contrae el grupo de forma predeterminada.

<Note>
  La propiedad `expanded` solo afecta a los grupos anidados (grupos dentro de otros grupos). Los grupos de nivel superior siempre se expanden y no puedes contraerlos.
</Note>

```json theme={null}
{
  "group": "Primeros pasos",
  "pages": [
    "quickstart",
    {
      "group": "Avanzado",
      "expanded": false,
      "pages": ["installation", "configuration"]
    }
  ]
}
```

<div id="tabs">
  ## Tabs
</div>

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.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/tabs-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=aeec785d0771a3a7a87d941e318bf8e7" alt="Gráfico decorativo de una navegación por pestañas." width="1184" height="320" data-path="images/navigation/tabs-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/tabs-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=20637c7abbe07ee7b2c41c4df26d2ffd" alt="Gráfico decorativo de una navegación por pestañas." width="1184" height="320" data-path="images/navigation/tabs-dark.png" />

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.

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

<div id="menus">
  ### Menús
</div>

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.

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

<div id="anchors">
  ## Anclas
</div>

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.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/anchors-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=e66255f62fc5d17ca135f21f84ed9325" alt="Gráfico decorativo de una navegación con anclas." width="1184" height="320" data-path="images/navigation/anchors-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/anchors-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=734e33b5fd52071d6f4019b273f2a0e8" alt="Gráfico decorativo de una navegación con anclas." width="1184" height="320" data-path="images/navigation/anchors-dark.png" />

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.

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

<div id="global-anchors">
  ### Anclajes globales
</div>

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.

```json theme={null}
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Cambios",
          "icon": "list",
          "href": "/changelog"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
```

<div id="products">
  ## Productos
</div>

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/uTIQZECUoznwRp7Y/images/navigation/product-switcher-light.png?fit=max&auto=format&n=uTIQZECUoznwRp7Y&q=85&s=ab051b15c6e533eb2d723fed8f400704" alt="Gráfico decorativo de un selector de productos." width="2368" height="640" data-path="images/navigation/product-switcher-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/uTIQZECUoznwRp7Y/images/navigation/product-switcher-dark.png?fit=max&auto=format&n=uTIQZECUoznwRp7Y&q=85&s=4827f6913945eeadb2c54362ee0f748d" alt="Gráfico decorativo de un selector de productos." width="2368" height="640" data-path="images/navigation/product-switcher-dark.png" />

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.

```json theme={null}
{
  "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"
      }
    ]
  }
}
```

<div id="dropdowns">
  ## Menús desplegables
</div>

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.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/dropdowns-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=f04faa13e4a15c6866b8ceee98362018" alt="Gráfico decorativo de una navigation con menú desplegable." width="1184" height="320" data-path="images/navigation/dropdowns-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/dropdowns-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=4ee16248cae08fee00fe98952b599041" alt="Gráfico decorativo de una navigation con menú desplegable." width="1184" height="320" data-path="images/navigation/dropdowns-dark.png" />

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.

```json theme={null}
{
  "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"
      }
    ]
  }
}
```

<div id="openapi">
  ## OpenAPI
</div>

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.

<Note>
  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`.
</Note>

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](/es/api-playground/openapi-setup).

```json theme={null}
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
```

<div id="versions">
  ## Versiones
</div>

Divide tu navigation en diferentes versiones. Puedes seleccionar la versión desde un menú desplegable.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/f7fo9pnTEtzBD70_/images/navigation/versions-light.png?fit=max&auto=format&n=f7fo9pnTEtzBD70_&q=85&s=85e9cca71a814be044a285028cf9a2a1" alt="Gráfico decorativo de un selector de versión." width="1184" height="320" data-path="images/navigation/versions-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/f7fo9pnTEtzBD70_/images/navigation/versions-dark.png?fit=max&auto=format&n=f7fo9pnTEtzBD70_&q=85&s=fdb637aea218b4035afdaca14dae7d38" alt="Gráfico decorativo de un selector de versión." width="1184" height="320" data-path="images/navigation/versions-dark.png" />

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.

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

<div id="default-version">
  ### Versión predeterminada
</div>

Mintlify usa la primera versión del array `versions` como predeterminada. Usa el campo `default` para especificar una versión diferente como predeterminada.

```json theme={null}
{
  "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"]
          }
        ]
      }
    ]
  }
}
```

<div id="version-tags">
  ### Etiquetas de versión
</div>

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

```json theme={null}
{
  "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"]
          }
        ]
      }
    ]
  }
}
```

<div id="languages">
  ## Idiomas
</div>

Divide tu navegación en diferentes idiomas. Los idiomas se pueden seleccionar desde un menú desplegable.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/languages-light.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=e451ef6550588674e26e264ce2cbe399" alt="Gráfico decorativo de un selector de idioma." width="1184" height="320" data-path="images/navigation/languages-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/mintlify/Y6rP0BmbzgwHuEoU/images/navigation/languages-dark.png?fit=max&auto=format&n=Y6rP0BmbzgwHuEoU&q=85&s=99a90032d57cfefe2b46fb0d191391c7" alt="Gráfico decorativo de un selector de idioma." width="1184" height="320" data-path="images/navigation/languages-dark.png" />

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:

<CardGroup cols={2}>
  <Card title="Árabe (ar)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" horizontal />

  <Card title="Catalán (ca)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ca.png" horizontal />

  <Card title="Checo (cs)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cs.png" horizontal />

  <Card title="Chino (cn)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" horizontal />

  <Card title="Chino (zh-Hant)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" horizontal />

  <Card title="Danés (da)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/da.png" horizontal />

  <Card title="Neerlandés (nl)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/nl.png" horizontal />

  <Card title="Inglés (en)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" horizontal />

  <Card title="Finlandés (fi)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fi.png" horizontal />

  <Card title="Francés (fr)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" horizontal />

  <Card title="Alemán (de)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" horizontal />

  <Card title="Hebreo (he)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/he.png" horizontal />

  <Card title="Hindi (hi)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/hi.png" horizontal />

  <Card title="Húngaro (hu)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/hu.png" horizontal />

  <Card title="Indonesio (id)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" horizontal />

  <Card title="Italiano (it)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" horizontal />

  <Card title="Japonés (jp)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" horizontal />

  <Card title="Coreano (ko)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" horizontal />

  <Card title="Letón (lv)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/lv.png" horizontal />

  <Card title="Noruego (no)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/no.png" horizontal />

  <Card title="Polaco (pl)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pl.png" horizontal />

  <Card title="Portugués (pt-BR)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" horizontal />

  <Card title="Rumano (ro)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ro.png" horizontal />

  <Card title="Ruso (ru)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" horizontal />

  <Card title="Español (es)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" horizontal />

  <Card title="Sueco (sv)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/sv.png" horizontal />

  <Card title="Turco (tr)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" horizontal />

  <Card title="Ucraniano (uk)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ua.png" horizontal />

  <Card title="Uzbeko (uz)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/uz.png" horizontal />

  <Card title="Vietnamita (vi)" icon="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/vi.png" horizontal />
</CardGroup>

```json theme={null}
{
  "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, [configura una automatización](/es/automations) para ejecutar el agente de forma programada o en respuesta a cambios enviados al repositorio.

<div id="nesting">
  ## Anidación
</div>

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.

<CodeGroup>
  ```json Pestañas que contienen tabs theme={null}
  {
    "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"]
            }
          ]
        }
      ]
    }
  }
  ```

  ```json Tabs que contienen tabs theme={null}
  {
    "navigation": {
      "anchors": [
        {
          "anchor": "Documentation",
          "icon": "book-open",
          "tabs": [
            {
              "tab": "Guides",
              "pages": ["quickstart", "tutorial"]
            },
            {
              "tab": "API",
              "pages": ["api/overview", "api/endpoints"]
            }
          ]
        },
        {
          "anchor": "Community",
          "icon": "users",
          "href": "https://community.example.com"
        }
      ]
    }
  }
  ```

  ```json Productos que contienen pestañas theme={null}
  {
    "navigation": {
      "products": [
        {
          "product": "Platform",
          "icon": "server",
          "tabs": [
            {
              "tab": "Documentation",
              "groups": [
                {
                  "group": "Getting started",
                  "pages": ["platform/quickstart"]
                }
              ]
            },
            {
              "tab": "API Reference",
              "pages": ["platform/api"]
            }
          ]
        },
        {
          "product": "Mobile SDK",
          "icon": "mobile",
          "pages": ["mobile/overview"]
        }
      ]
    }
  }
  ```

  ```json SaaS multiproducto con pestañas y menú theme={null}
  {
    "navigation": {
      "products": [
        {
          "product": "Platform",
          "icon": "cloud",
          "tabs": [
            {
              "tab": "Documentation",
              "menu": [
                {
                  "item": "Getting Started",
                  "icon": "rocket",
                  "groups": [
                    {
                      "group": "Setup",
                      "pages": ["platform/install", "platform/config"]
                    },
                    {
                      "group": "Core Concepts",
                      "pages": ["platform/concepts/auth", "platform/concepts/data"]
                    }
                  ]
                },
                {
                  "item": "Guides",
                  "icon": "book",
                  "pages": ["platform/guides/deployment", "platform/guides/scaling"]
                }
              ]
            },
            {
              "tab": "API Reference",
              "groups": [
                {
                  "group": "REST API",
                  "pages": ["platform/api/users", "platform/api/projects"]
                },
                {
                  "group": "GraphQL",
                  "pages": ["platform/api/graphql/queries", "platform/api/graphql/mutations"]
                }
              ]
            }
          ]
        },
        {
          "product": "Analytics",
          "icon": "chart-bar",
          "tabs": [
            {
              "tab": "Documentation",
              "groups": [
                {
                  "group": "Getting Started",
                  "pages": ["analytics/quickstart", "analytics/setup"]
                }
              ]
            },
            {
              "tab": "API",
              "pages": ["analytics/api/events", "analytics/api/reports"]
            }
          ]
        }
      ]
    }
  }
  ```

  ```json Documentación versionada con pestañas theme={null}
  {
    "navigation": {
      "versions": [
        {
          "version": "v2.0",
          "tabs": [
            {
              "tab": "Documentation",
              "groups": [
                {
                  "group": "Getting Started",
                  "pages": ["v2/quickstart", "v2/migration-from-v1"]
                },
                {
                  "group": "Features",
                  "pages": ["v2/features/auth", "v2/features/api"]
                }
              ]
            },
            {
              "tab": "API Reference",
              "pages": ["v2/api/overview", "v2/api/endpoints"]
            }
          ]
        },
        {
          "version": "v1.0",
          "tabs": [
            {
              "tab": "Documentation",
              "groups": [
                {
                  "group": "Getting Started",
                  "pages": ["v1/quickstart"]
                }
              ]
            },
            {
              "tab": "API Reference",
              "pages": ["v1/api/overview"]
            }
          ]
        }
      ]
    }
  }
  ```
</CodeGroup>

<div id="breadcrumbs">
  ## Migas de pan
</div>

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

<CodeGroup>
  ```json Mostrar migas de pan completas theme={null}
  "styling": {
    "eyebrows": "breadcrumbs"
  }
  ```

  ```json Mostrar solo la sección superior theme={null}
  "styling": {
    "eyebrows": "section"
  }
  ```
</CodeGroup>

<div id="interaction-configuration">
  ## Configuración de la interacción
</div>

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

<div id="enable-auto-navigation-for-groups">
  ### Enable auto-navigation for groups
</div>

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.

<CodeGroup>
  ```json Force navigation theme={null}
  "interaction": {
    "drilldown": true  // Forzar la navegación a la primera página cuando un usuario expande un menú desplegable
  }
  ```

  ```json Prevent navigation theme={null}
  "interaction": {
    "drilldown": false // No navegar nunca, solo expandir o contraer el grupo
  }
  ```
</CodeGroup>


## Related topics

- [Scripts personalizados](/es/customize/custom-scripts.md)
- [Configuraciones](/es/editor/configurations.md)
- [Servidor Admin Model Context Protocol (MCP)](/es/ai/mintlify-mcp.md)