Estructura del sitio

Configura la barra de navegación, navegación, pie de página, banner, menú contextual, redirecciones y otros ajustes estructurales en tu archivo docs.json.

Usa estos ajustes en tu archivo docs.json para controlar la arquitectura de información y la experiencia de usuario de tu sitio. Modifica la barra de navegación, pie de página, banners, comportamiento de navegación, menús contextuales, redirecciones y variables de contenido globales.

Ajustes

Tipo: object

La estructura de navegación de tu contenido. Aquí es donde defines la jerarquía completa de páginas de tu sitio usando grupos, pestañas, desplegables, anclas y más.

Consulta Navegación para obtener documentación completa sobre cómo construir tu estructura de navegación.

navigation.globalobject

Elementos de navegación globales que aparecen en todas las páginas y configuraciones regionales.

Show navigation.global

tabsarray of object

Pestañas de navegación de nivel superior para organizar secciones principales. Consulta Pestañas.

Show tabs

tabstringrequired

Nombre visible de la pestaña. Longitud mínima: 1.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

hiddenboolean

Si se debe ocultar esta pestaña de forma predeterminada.

hrefstring (uri)required

URL o ruta para el destino de la pestaña.

anchorsarray of object

Enlaces con ancla que aparecen de forma destacada en la barra lateral. Consulta Anclas.

Show anchors

anchorstringrequired

Nombre visible del ancla. Longitud mínima: 1.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

colorobject

Colores personalizados para el icono del ancla.

Show color

lightstring

Color del ancla para el modo claro. Debe ser un código hexadecimal que comience con #.

darkstring

Color del ancla para el modo oscuro. Debe ser un código hexadecimal que comience con #.

hiddenboolean

Si se debe ocultar este ancla de forma predeterminada.

hrefstring (uri)required

URL o ruta para el destino del ancla.

dropdownsarray of object

Menús desplegables para organizar contenido relacionado. Consulta Desplegables.

Show dropdowns

dropdownstringrequired

Nombre visible del desplegable. Longitud mínima: 1.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

hiddenboolean

Si se debe ocultar este desplegable de forma predeterminada.

hrefstring (uri)required

URL o ruta para el destino del desplegable.

languagesarray of object

Configuración del selector de idioma para sitios localizados. Consulta Idiomas.

Show languages

language"ar" | "ca" | "cn" | "cs" | "de" | "en" | "es" | "fi" | "fr" | "fr-CA" | "he" | "hi" | "hu" | "id" | "it" | "ja" | "ja-JP" | "jp" | "ko" | "lv" | "nl" | "no" | "pl" | "pt" | "pt-BR" | "ro" | "ru" | "sv" | "tr" | "uk" | "uz" | "vi" | "zh" | "zh-CN" | "zh-Hans" | "zh-Hant" | "zh-TW"required

Código de idioma en formato ISO 639-1.

defaultboolean

Si este es el idioma predeterminado.

hiddenboolean

Si se debe ocultar esta opción de idioma de forma predeterminada.

hrefstring (uri)required

Una ruta válida o enlace externo a esta versión de tu documentación.

versionsarray of object

Configuración del selector de versiones para sitios con múltiples versiones. Consulta Versiones.

Show versions

versionstringrequired

Nombre visible de la versión. Longitud mínima: 1.

defaultboolean

Si esta es la versión predeterminada.

hiddenboolean

Si se debe ocultar esta versión de forma predeterminada.

hrefstring (uri)required

URL o ruta a esta versión de tu documentación.

productsarray of object

Selector de productos para sitios con múltiples productos. Consulta Productos.

Show products

productstringrequired

Nombre visible del producto.

descriptionstring

Descripción del producto.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

navigation.languagesarray of object

Selector de idioma para sitios multi-idioma. Cada entrada puede incluir configuraciones específicas del idioma para banner, footer y navbar, además de la estructura de navegación.

Show navigation.languages

Código de idioma en formato ISO 639-1.

defaultboolean

Si este es el idioma predeterminado.

bannerobject

Configuración del banner específica del idioma. Acepta las mismas opciones que el campo banner de nivel superior.

footerobject

Configuración del pie de página específica del idioma. Acepta las mismas opciones que el campo footer de nivel superior.

navbarobject

Configuración de la barra de navegación específica del idioma. Acepta las mismas opciones que el campo navbar de nivel superior.

hiddenboolean

Si se debe ocultar esta opción de idioma de forma predeterminada.

navigation.versionsarray of object

Selector de versiones para sitios con múltiples versiones.

Show navigation.versions

defaultboolean

Establécelo en true para hacer esta la versión predeterminada. Si se omite, la primera versión del array es la predeterminada.

tagstring

Etiqueta de insignia que se muestra junto a la versión en el selector. Úsala para destacar versiones como "Latest", "Recommended" o "Beta".

navigation.tabsarray of object

Pestañas de navegación de nivel superior.

navigation.anchorsarray of object

Anclas de la barra lateral.

navigation.dropdownsarray of object

Desplegables para agrupar contenido relacionado.

navigation.productsarray of object

Selector de productos para sitios con múltiples productos.

navigation.groupsarray of object

Grupos para organizar el contenido en secciones.

navigation.pagesarray of string or object

Páginas individuales que conforman tu documentación.

navigation.directory"none" | "accordion" | "card"

Diseño de directorio para páginas raíz en grupos de navegación. Cuando se establece, los grupos con una página root muestran automáticamente un listado de sus páginas secundarias debajo del contenido de la página. Los valores se heredan recursivamente a través del árbol de navegación. Los descendientes pueden sobreescribirlos. Consulta Listados de directorio.

Tipo: object

Enlaces y botones que se muestran en la barra de navegación superior.

navbar.linksarray of object

Enlaces que se mostrarán en la barra de navegación.

Show navbar.links

type"github" | "discord"

Tipo de enlace opcional. Omítelo para un enlace de texto estándar. Establécelo en github para enlazar a un repositorio de GitHub y mostrar el conteo de estrellas. Establécelo en discord para enlazar a un servidor de Discord y mostrar el número de usuarios en línea.

labelstring

Texto del enlace. Obligatorio cuando type no está definido. Opcional para github y discord. Si se omite, Mintlify genera el texto a partir de los datos de la API.

hrefstring (uri)required

Destino del enlace. Debe ser una URL externa válida. Para github, debe ser una URL de repositorio de GitHub. Para discord, debe ser una URL de invitación de Discord.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

navbar.primaryobject

Botón principal de llamada a la acción en la barra de navegación.

Show navbar.primary

type"button" | "github" | "discord"required

Estilo del botón. Elige button para un botón estándar, github para un enlace a un repositorio de GitHub con conteo de estrellas, o discord para una invitación a Discord con conteo de usuarios en línea.

labelstring

Texto del botón. Obligatorio cuando type es button. Opcional para github y discord.

hrefstring (uri)required

Destino del botón. Debe ser una URL externa. Para github, debe ser una URL de repositorio de GitHub. Para discord, debe ser una URL de invitación de Discord.

docs.json

"navbar": {
  "links": [
    { "type": "github", "href": "https://github.com/your-org/your-repo" },
    { "label": "Comunidad", "href": "https://example.com/community" }
  ],
  "primary": {
    "type": "button",
    "label": "Comenzar",
    "href": "https://example.com/signup"
  }
}

Tipo: object

Contenido del pie de página y enlaces a redes sociales.

footer.socialsobject

Perfiles de redes sociales que se mostrarán en el pie de página. Cada clave es el nombre de una plataforma y cada valor es la URL de tu perfil.

Claves válidas: x, website, facebook, youtube, discord, slack, github, linkedin, instagram, hacker-news, medium, telegram, twitter, x-twitter, earth-americas, bluesky, threads, reddit, podcast

"socials": {
  "x": "https://x.com/yourhandle",
  "github": "https://github.com/your-org"
}

footer.linksarray of object

Columnas de enlaces que se muestran en el pie de página. Máximo 4 columnas.

Show footer.links

headerstring

Título de la columna. Longitud mínima: 1.

itemsarray of objectrequired

Enlaces que se mostrarán en la columna.

Show items

labelstringrequired

Texto del enlace. Longitud mínima: 1.

hrefstring (uri)required

URL de destino del enlace.

docs.json

"footer": {
  "socials": {
    "x": "https://x.com/yourhandle",
    "github": "https://github.com/your-org"
  },
  "links": [
    {
      "header": "Empresa",
      "items": [
        { "label": "Blog", "href": "https://example.com/blog" },
        { "label": "Carreras", "href": "https://example.com/careers" }
      ]
    }
  ]
}

Tipo: object

Un banner para todo el sitio que se muestra en la parte superior de cada página.

banner.contentstringrequired

El contenido de texto que se muestra en el banner. Admite formato MDX básico, incluidos enlaces, texto en negrita y texto en cursiva. Los componentes personalizados no son compatibles.

"content": "Acabamos de lanzar algo nuevo. [Más información](https://example.com)"

banner.dismissibleboolean

Si se debe mostrar un botón para descartar para que los usuarios puedan cerrar el banner. El valor predeterminado es false.

docs.json

"banner": {
  "content": "Acabamos de lanzar algo nuevo. [Más información](https://example.com)",
  "dismissible": true
}

`interaction`

Tipo: object

Controla el comportamiento de interacción del usuario para los elementos de navegación.

interaction.drilldownboolean

Controla la navegación automática al seleccionar un grupo de navegación. Establécelo en true para navegar automáticamente a la primera página cuando se expande un grupo. Establécelo en false para solo expandir o contraer el grupo sin navegar. Déjalo sin establecer para usar el comportamiento predeterminado del tema.

`contextual`

Tipo: object

El menú contextual brinda a los usuarios acceso rápido a herramientas de IA y acciones de la página. Aparece en el encabezado de la página o en la barra lateral de la tabla de contenidos.

El menú contextual solo está disponible en los despliegues de vista previa y producción.

contextual.optionsarrayrequired

Acciones disponibles en el menú contextual. La primera opción del array aparece como la acción predeterminada.

Opciones integradas:

"add-mcp"—Agrega tu servidor MCP a la configuración del usuario
"aistudio"—Envía la página actual a Google AI Studio
"assistant"—Abre el asistente de IA con la página actual como contexto
"copy"—Copia la página actual como Markdown en el portapapeles
"chatgpt"—Envía la página actual a ChatGPT
"claude"—Envía la página actual a Claude
"cursor"—Instala tu servidor MCP alojado en Cursor
"devin"—Envía la página actual a Devin
"devin-mcp"—Instala tu servidor MCP alojado en Devin
"download-pdf"—Descarga la página actual como un PDF
"download-spec"—Descarga las especificaciones de OpenAPI del despliegue (un solo archivo, o comprimidas en zip si hay varias)
"grok"—Envía la página actual a Grok
"mcp"—Copia la URL de tu servidor MCP en el portapapeles
"perplexity"—Envía la página actual a Perplexity
"view"—Ver la página actual como Markdown en una nueva pestaña
"vscode"—Instala tu servidor MCP alojado en VS Code
"devin-desktop"—Abre Devin Desktop con la página actual como contexto

Define opciones personalizadas como objetos:

Show Opción personalizada

titlestringrequired

Título visible para la opción personalizada.

descriptionstringrequired

Texto de descripción para la opción personalizada.

iconstring

Icono para la opción personalizada. Admite nombres de la biblioteca de iconos, URLs, rutas o código SVG.

hrefstring or objectrequired

Destino del enlace. Puede ser una cadena de URL o un objeto con base y parámetros query opcionales.

Valores de marcador de posición disponibles:

$page—Contenido de la página actual
$path—Ruta de la página actual
$mcp—URL del servidor MCP

contextual.display"header" | "toc"

Dónde mostrar las opciones contextuales. Elige header para mostrarlas en el menú contextual de la parte superior de la página, o toc para mostrarlas en la barra lateral de la tabla de contenidos. El valor predeterminado es header.

docs.json

"contextual": {
  "options": ["copy", "view", "chatgpt", "claude"],
  "display": "header"
}

`redirects`

Tipo: array of object

Redirecciones para páginas movidas, renombradas o eliminadas. Úsalas para preservar enlaces cuando reorganizas tu contenido.

redirects[].sourcestringrequired

La ruta desde la que redirigir. Ejemplo: /old-page

redirects[].destinationstringrequired

La ruta a la que redirigir. Ejemplo: /new-page

redirects[].permanentboolean

Si es true, emite una redirección permanente (308). Si es false, emite una redirección temporal (307). El valor predeterminado es true.

docs.json

"redirects": [
  {
    "source": "/old-page",
    "destination": "/new-page"
  },
  {
    "source": "/temp-redirect",
    "destination": "/destination",
    "permanent": false
  }
]

`errors`

Tipo: object

Configuración de páginas de error personalizadas.

errors.404object

Configuración para la página de error 404 “Página no encontrada”.

Show errors.404

redirectboolean

Si se debe redirigir automáticamente a la página de inicio cuando no se encuentra una página. El valor predeterminado es true.

titlestring

Título personalizado para la página 404.

descriptionstring

Descripción personalizada para la página 404. Admite formato MDX, incluidos enlaces, texto en negrita y cursiva, y componentes personalizados.

docs.json

"errors": {
  "404": {
    "redirect": false,
    "title": "Página no encontrada",
    "description": "La página que buscas no existe. [Ir al inicio](/)."
  }
}

`variables`

Tipo: object

Variables globales para usar en toda tu documentación. Mintlify reemplaza los marcadores de posición {{variableName}} con los valores definidos en tiempo de compilación.

variables.[variableName]string

Un par clave-valor donde la clave es el nombre de la variable y el valor es el texto de reemplazo.

Los nombres de variables pueden contener caracteres alfanuméricos y guiones.
Debes definir todas las variables referenciadas en tu contenido o la compilación fallará.
Mintlify sanitiza los valores para prevenir ataques XSS.

docs.json

"variables": {
  "version": "2.0.0",
  "api-url": "https://api.example.com"
}

En tu contenido, referencia las variables con dobles llaves:

La versión actual es {{version}}. Realiza solicitudes a {{api-url}}.

`metadata`

Tipo: object

Configuración de metadatos a nivel de página aplicada globalmente.

metadata.timestampboolean

Habilita una fecha de última modificación en todas las páginas. Cuando está habilitado, las páginas muestran la fecha en que el contenido fue modificado por última vez. El valor predeterminado es false.

Puedes sobrescribir esta configuración en páginas individuales usando el campo de frontmatter timestamp. Consulta Páginas para más detalles.

docs.json

"metadata": {
  "timestamp": true
}

Estructura del sitio

Ajustes

`navigation` - required

`navbar`

`footer`

`banner`

`interaction`

`contextual`

`redirects`

`errors`

`variables`

`metadata`

On this page