---
title: Navbar y Footer
description: Configura enlaces de navegación personalizados, un botón CTA, enlaces de pie de página en múltiples columnas e íconos sociales desde docs.json.
url: https://docs.thally.io/es/guides/navbar-and-footer
---

# Navbar y Footer

Configura enlaces de navegación personalizados, un botón CTA, enlaces de pie de página en múltiples columnas e íconos sociales desde docs.json.

La barra de navegación superior y el pie de página son configurables desde `docs.json`. No se requieren cambios de código — agrega un bloque `navbar` o `footer` y Thally lo detecta automáticamente.

## Navbar

Agrega un bloque `navbar` a `docs.json` para controlar los enlaces y el botón CTA en la barra superior.

```json
"navbar": {
  "links": [
    { "label": "GitHub", "href": "https://github.com/your-org/repo", "type": "github" },
    { "label": "Support", "href": "https://support.example.com" }
  ],
  "primary": { "label": "Get started", "href": "/quickstart" }
}
```

### `navbar.links`

Un arreglo de enlaces de navegación renderizados a la izquierda del botón CTA.

| Campo | Tipo | Descripción |
| --- | --- | --- |
| `label` | `string` | Texto del enlace |
| `href` | `string` | URL de destino (interna o externa) |
| `type` | `"github"` _(opcional)_ | Establece en `"github"` para renderizar el ícono de GitHub junto a la etiqueta |

Cuando se establece `type: "github"`, la marca de GitHub se muestra a la izquierda de la etiqueta:

```json
{ "label": "GitHub", "href": "https://github.com/your-org/repo", "type": "github" }
```

Los enlaces externos se abren en una pestaña nueva automáticamente.

### `navbar.primary`

El botón CTA principal — renderizado como una píldora de acento rellena en la barra superior. Cuando se establece, reemplaza el CTA detectado automáticamente desde `siteConfig.links`.

```json
"primary": { "label": "Get started", "href": "/quickstart" }
```

Establece `primary` en `null` para eliminar completamente el botón CTA, incluso cuando `siteConfig.links` normalmente proporcionaría uno:

```json
"primary": null
```

> **Alternativa:**
Cuando `navbar` no está definido en `docs.json`, Thally recurre a detectar automáticamente un enlace de soporte y CTA desde `siteConfig.links` en `src/data/site.ts`. Define `navbar` en `docs.json` cuando quieras un control explícito.

### `navbar.logo`

Controla la imagen del logotipo y la visualización del nombre del sitio en la barra superior. Estos ajustes proporcionan un respaldo controlado por fuente cuando no hay logotipo administrado o de admin configurado.

```json
"navbar": {
  "logo": {
    "light": "/brand/logo-light.svg",
    "dark": "/brand/logo-dark.svg",
    "showTitle": true,
    "rightText": "Docs"
  }
}
```

| Campo | Tipo | Descripción |
| --- | --- | --- |
| `light` | `string` | Ruta al recurso del logotipo en modo claro |
| `dark` | `string` _(opcional)_ | Ruta a una variante en modo oscuro. Si se omite, se usa `light` |
| `showTitle` | `boolean` _(opcional)_ | Muestra el nombre del sitio junto al logotipo. Por defecto es `true`; establece `false` para ocultar el nombre del sitio |
| `rightText` | `string` _(opcional)_ | Texto secundario que se muestra después del nombre del sitio |

Cuando `logo` se omite por completo, Thally muestra la imagen del logotipo predeterminado y agrega el sufijo "Docs" después del nombre del sitio.

Las rutas del logotipo deben apuntar a archivos dentro de `public/`. Se rechazan URLs externas, traversal de rutas, cadenas de consulta y barras invertidas. Cuando se configura un objeto `logo`, el sufijo "Docs" aparece solo si se proporciona `rightText`.

Establece `logo` en `null` para usar solo texto sin logotipo ni sufijo "Docs":

```json
"navbar": {
  "logo": null
}
```

---

## Footer

Agrega un bloque `footer` a `docs.json` para renderizar una cuadrícula de enlaces en múltiples columnas e íconos sociales en la parte inferior de cada página.

```json
"footer": {
  "socials": {
    "github": "https://github.com/your-org",
    "twitter": "https://twitter.com/yourhandle",
    "discord": "https://discord.gg/invite"
  },
  "links": [
    {
      "heading": "Documentation",
      "items": [
        { "label": "Quick Start", "href": "/quickstart" },
        { "label": "Guides", "href": "/guides/getting-started" }
      ]
    },
    {
      "heading": "Tooling",
      "items": [
        { "label": "CLI Reference", "href": "/guides/cli-reference" },
        { "label": "MCP Server", "href": "/guides/mcp-server" }
      ]
    }
  ]
}
```

### `footer.socials`

Un mapa de claves de plataformas sociales a URLs. Claves compatibles con íconos:

| Clave | Ícono |
| --- | --- |
| `github` | Marca de GitHub |
| `twitter` o `x` | Marca de X (Twitter) |
| `discord` | Logo de Discord |
| `linkedin` | Logo de LinkedIn |

Cualquier otra clave se renderiza como un enlace de texto simple.

### `footer.links`

Un arreglo de columnas de enlaces. Cada columna tiene:

| Campo | Tipo | Descripción |
| --- | --- | --- |
| `heading` | `string` | Encabezado de columna (renderizado en versalitas) |
| `items` | `Array<{ label, href }>` | Enlaces en esta columna |

Las columnas se muestran en una cuadrícula responsiva — 2 columnas en móvil, 3 en tableta, 4 en escritorio.

### `footer.copyright`

Reemplaza la línea de copyright predeterminada con un texto personalizado. Usa `{year}` como marcador de posición para el año actual:

```json
"footer": {
  "copyright": "Copyright {year} Acme Inc."
}
```

Cuando se omite, el pie de página muestra "© AAAA NombreDelSitio. All rights reserved." usando el nombre de `siteConfig`.

> **Pie de página predeterminado:**
Cuando `footer` no está definido en `docs.json`, Thally renderiza un pie de página mínimo de una sola línea con el nombre del sitio y `siteConfig.links`.

---

## Ejemplo completo

```json
{
  "navbar": {
    "links": [
      { "label": "GitHub", "href": "https://github.com/your-org/repo", "type": "github" }
    ],
    "primary": { "label": "Get started", "href": "/quickstart" },
    "logo": {
      "light": "/brand/logo-light.svg",
      "dark": "/brand/logo-dark.svg",
      "showTitle": true,
      "rightText": "Docs"
    }
  },
  "footer": {
    "copyright": "Copyright {year} Tu Empresa.",
    "socials": {
      "github": "https://github.com/your-org",
      "twitter": "https://twitter.com/yourhandle"
    },
    "links": [
      {
        "heading": "Product",
        "items": [
          { "label": "Overview", "href": "/" },
          { "label": "Quick Start", "href": "/quickstart" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      },
      {
        "heading": "Developers",
        "items": [
          { "label": "API Reference", "href": "/api" },
          { "label": "CLI", "href": "/guides/cli-reference" }
        ]
      }
    ]
  }
}
```