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
navigation - required
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.
Elementos de navegación globales que aparecen en todas las páginas y configuraciones regionales. Mostrar navigation.global
Pestañas de navegación de nivel superior para organizar secciones principales. Consulta Pestañas . Nombre visible de la pestaña. Longitud mínima: 1.
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.
El estilo de ícono de Font Awesome . Solo se usa con íconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands. Si se debe ocultar esta pestaña de forma predeterminada.
URL o ruta para el destino de la pestaña.
Enlaces con ancla que aparecen de forma destacada en la barra lateral. Consulta Anclas . Nombre visible del ancla. Longitud mínima: 1.
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.
El estilo de ícono de Font Awesome . Solo se usa con íconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands. Colores personalizados para el icono del ancla. Color del ancla para el modo claro. Debe ser un código hexadecimal que comience con #.
Color del ancla para el modo oscuro. Debe ser un código hexadecimal que comience con #.
Si se debe ocultar este ancla de forma predeterminada.
URL o ruta para el destino del ancla.
Menús desplegables para organizar contenido relacionado. Consulta Desplegables . Nombre visible del desplegable. Longitud mínima: 1.
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.
El estilo de ícono de Font Awesome . Solo se usa con íconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands. Si se debe ocultar este desplegable de forma predeterminada.
URL o ruta para el destino del desplegable.
Configuración del selector de idioma para sitios localizados. Consulta Idiomas . language
"ar" | "ca" | "cn" | "cs" | "de" | "en" | "es" | "fr" | "he" | "hi" | "hu" | "id" | "it" | "ja" | "jp" | "ko" | "lv" | "nl" | "no" | "pl" | "pt" | "pt-BR" | "ro" | "ru" | "sv" | "tr" | "ua" | "uz" | "vi" | "zh" | "zh-Hans" | "zh-Hant"
requerido
Código de idioma en formato ISO 639-1.
Si este es el idioma predeterminado.
Si se debe ocultar esta opción de idioma de forma predeterminada.
Una ruta válida o enlace externo a esta versión de tu documentación.
Configuración del selector de versiones para sitios con múltiples versiones. Consulta Versiones . Nombre visible de la versión. Longitud mínima: 1.
Si esta es la versión predeterminada.
Si se debe ocultar esta versión de forma predeterminada.
URL o ruta a esta versión de tu documentación.
Selector de productos para sitios con múltiples productos. Consulta Productos . Nombre visible del producto.
Descripción del producto.
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.
El estilo de ícono de Font Awesome . Solo se usa con íconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
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. Mostrar navigation.languages
language
"ar" | "ca" | "cn" | "cs" | "de" | "en" | "es" | "fr" | "he" | "hi" | "id" | "it" | "ja" | "jp" | "ko" | "lv" | "nl" | "no" | "pl" | "pt" | "pt-BR" | "ro" | "ru" | "sv" | "tr" | "uk" | "uz" | "vi" | "zh" | "zh-Hans" | "zh-Hant"
requerido
Código de idioma en formato ISO 639-1.
Si este es el idioma predeterminado.
Configuración del banner específica del idioma. Acepta las mismas opciones que el campo banner de nivel superior. Configuración del pie de página específica del idioma. Acepta las mismas opciones que el campo footer de nivel superior. Configuración de la barra de navegación específica del idioma. Acepta las mismas opciones que el campo navbar de nivel superior. Si se debe ocultar esta opción de idioma de forma predeterminada.
Selector de versiones para sitios con múltiples versiones . Mostrar navigation.versions
Establécelo en true para hacer esta la versión predeterminada. Si se omite, la primera versión del array es la predeterminada.
Etiqueta de insignia que se muestra junto a la versión en el selector. Úsala para destacar versiones como "Latest", "Recommended" o "Beta".
Pestañas de navegación de nivel superior.
Selector de productos para sitios con múltiples productos .
Grupos para organizar el contenido en secciones.
navigation.pages
array of string or object
Páginas individuales que conforman tu documentación.
navbar
Tipo: object
Enlaces y botones que se muestran en la barra de navegación superior.
Enlaces que se mostrarán en la barra de navegación. 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.
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.
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.
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.
El estilo de ícono de Font Awesome . Solo se usa con íconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
Botón principal de llamada a la acción en la barra de navegación. type
"button" | "github" | "discord"
requerido
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.
Texto del botón. Obligatorio cuando type es button. Opcional para github y discord.
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
Reportar código incorrecto
"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.
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 Reportar código incorrecto
"socials" : {
"x" : "https://x.com/yourhandle" ,
"github" : "https://github.com/your-org"
}
Columnas de enlaces que se muestran en el pie de página. Título de la columna. Longitud mínima: 1.
Enlaces que se mostrarán en la columna. Texto del enlace. Longitud mínima: 1.
URL de destino del enlace.
docs.json
Reportar código incorrecto
"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" }
]
}
]
}
banner
Tipo: object
Un banner para todo el sitio que se muestra en la parte superior de cada página.
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. Reportar código incorrecto
"content" : "Acabamos de lanzar algo nuevo. [Más información](https://example.com)"
Si se debe mostrar un botón para descartar para que los usuarios puedan cerrar el banner. El valor predeterminado es false.
docs.json
Reportar código incorrecto
"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.
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.
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
"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
"windsurf" — Envía la página actual a Windsurf
Define opciones personalizadas como objetos: Mostrar Opción personalizada
Título visible para la opción personalizada.
Texto de descripción para la opción personalizada.
Icono para la opción personalizada. Admite nombres de la biblioteca de iconos, URLs, rutas o código SVG.
href
string or object
requerido
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
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
Reportar código incorrecto
"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.
La ruta desde la que redirigir. Ejemplo: /old-page
La ruta a la que redirigir. Ejemplo: /new-page
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
Reportar código incorrecto
"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.
Configuración para la página de error 404 “Página no encontrada”. Si se debe redirigir automáticamente a la página de inicio cuando no se encuentra una página. El valor predeterminado es true.
Título personalizado para la página 404.
Descripción personalizada para la página 404. Admite formato MDX, incluidos enlaces, texto en negrita y cursiva, y componentes personalizados.
docs.json
Reportar código incorrecto
"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.
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, guiones y puntos.
Debes definir todas las variables referenciadas en tu contenido o la compilación fallará.
Mintlify sanitiza los valores para prevenir ataques XSS.
docs.json
Reportar código incorrecto
"variables" : {
"version" : "2.0.0" ,
"api-url" : "https://api.example.com"
}
En tu contenido, referencia las variables con dobles llaves:
Reportar código incorrecto
La versión actual es { { version } } . Realiza solicitudes a { {api- url } } .
Tipo: object
Configuración de metadatos a nivel de página aplicada globalmente.
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
Reportar código incorrecto
"metadata" : {
"timestamp" : true
}