Navegación

Tu barra lateral y barra superior se definen completamente en docs.json. La jerarquía de navegación tiene tres niveles -- pestañas para secciones de nivel superior, grupos para carpetas colapsables, y páginas para entradas individuales -- además de anclas para enlaces externos que aparecen en todas las páginas.

Resumen de la estructura

{
  "navigation": {
    "tabs": [
      {
        "tab": "Documentation",
        "icon": "book-open",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["introduction", "quickstart"]
          }
        ]
      }
    ]
  }
}

Conceptos

Pestañas

Secciones de navegación de nivel superior. Controla su posición con el ajuste tabsPosition:

La posición predeterminada depende de tu tema:

{
  "tabsPosition": "left",
  "navigation": {
    "tabs": [
      { "tab": "Guides", "icon": "book", "groups": [...] },
      { "tab": "API", "icon": "code", "groups": [...] }
    ]
  }
}

Enlaces externos (Anclas)

Agrega enlaces externos que aparecen en la parte superior de la barra lateral en todas las páginas:

{
  "anchors": [
    { "name": "Blog", "href": "https://blog.example.com", "icon": "newspaper" },
    { "name": "Status", "href": "https://status.example.com", "icon": "signal" }
  ]
}

Grupos

Secciones colapsables dentro de una pestaña:

{
  "group": "Authentication",
  "pages": ["auth/overview", "auth/tokens"]
}

Páginas

Páginas de documentación individuales, referenciadas por su ruta de archivo (sin .mdx):

"pages": ["introduction", "guides/quickstart", "api/endpoints"]

Por defecto, el título de la barra lateral se genera a partir del nombre del archivo -- los guiones se convierten en espacios y cada palabra se capitaliza. Por ejemplo, "api/getting-started" se muestra como "Getting Started".

Para establecer un título de barra lateral personalizado, usa un objeto en lugar de una cadena de texto:

"pages": [
  "guides/quickstart",
  { "page": "deploy/aws", "title": "AWS Route 53 & CloudFront" },
  { "page": "content/seo", "title": "SEO" },
  { "page": "api/users", "title": "List Users", "method": "GET" }
]

Esto es útil para siglas, nombres propios y distintivos de endpoint de API.

Múltiples pestañas

Crea secciones separadas para diferentes audiencias:

{
  "navigation": {
    "tabs": [
      {
        "tab": "Guides",
        "icon": "book",
        "groups": [
          { "group": "Getting Started", "pages": ["intro", "quickstart"] }
        ]
      },
      {
        "tab": "API Reference",
        "icon": "code",
        "groups": [{ "group": "Endpoints", "pages": ["api/auth", "api/users"] }]
      }
    ]
  }
}

Enlaces de pestañas externas

Enlaza a documentación o recursos externos directamente desde las pestañas:

{
  "navigation": {
    "tabs": [
      { "tab": "Docs", "icon": "book", "groups": [...] },
      { "tab": "GitHub", "icon": "github", "href": "https://github.com/example/repo" }
    ]
  }
}

Las pestañas externas se abren en una nueva pestaña del navegador.

Grupos anidados

Organiza documentación compleja con estructuras anidadas:

{
  "group": "SDKs",
  "pages": [
    "sdks/overview",
    {
      "group": "JavaScript",
      "pages": ["sdks/js/install", "sdks/js/usage"]
    },
    {
      "group": "Python",
      "pages": ["sdks/python/install", "sdks/python/usage"]
    }
  ]
}

¿Qué sigue?