# Navbar

> La barra global de la home de iCloud: fija a todo el ancho, 44 de alto, translúcida con desenfoque sobre el contenido que pasa por abajo.

```tsx
import { Navbar, NavbarContent } from "sebs7n-ui/navbar"
```

## Ejemplos

### La barra global

La barra global de la home de iCloud: a todo el ancho, 44 de alto, translúcida con desenfoque y con el borde abajo desde el principio. Scrolleá dentro del recuadro: el contenido pasa por debajo, desenfocado, y la barra no cambia. Sobre el wallpaper (`data-ambient`) usa un fill más liviano, para que el wallpaper se vea a través.

```tsx
import { Button } from "sebs7n-ui/button"
import { Navbar, NavbarContent } from "sebs7n-ui/navbar"
import { NavbarLink } from "sebs7n-ui/navbar-link"
import { UserIcon } from "lucide-react"

function Variantes() {
  return (
    <div className="relative h-56 w-full overflow-y-auto rounded-surface border border-separator bg-background">
      <Navbar>
        <NavbarContent>
          <span className="text-title-3 text-label">
            Marca <span className="text-brand-900">Docs</span>
          </span>
          <nav aria-label="Demo de la barra" className="flex items-center gap-1">
            <NavbarLink active href="#ejemplos">
              Facturas
            </NavbarLink>
            <NavbarLink href="#ejemplos">Ayuda</NavbarLink>
            <Button aria-label="Cuenta" size="icon-md" variant="ghost">
              <UserIcon />
            </Button>
          </nav>
        </NavbarContent>
      </Navbar>
      <div className="flex flex-col gap-3 p-6">
        {Array.from({ length: 8 }, (_, i) => (
          <div className="h-10 rounded-control bg-fill-1" key={i} />
        ))}
      </div>
    </div>
  )
}
```

### En la columna del sitio

`maxWidth`: la barra sigue a todo el ancho y su contenido se centra en la columna de la página, alineado con los bloques de abajo.

```tsx
import { Navbar, NavbarContent } from "sebs7n-ui/navbar"
import { NavbarLink } from "sebs7n-ui/navbar-link"

function Column() {
  return (
    <div className="relative h-56 w-full overflow-y-auto rounded-surface border border-separator bg-background">
      <Navbar>
        <NavbarContent maxWidth={480}>
          <span className="text-title-3 text-label">Facturación</span>
          <NavbarLink href="#ejemplos">Precios</NavbarLink>
        </NavbarContent>
      </Navbar>
      <div className="mx-auto flex max-w-[480px] flex-col gap-3 px-4 py-6">
        {Array.from({ length: 6 }, (_, i) => (
          <div className="h-10 rounded-control bg-fill-1" key={i} />
        ))}
      </div>
    </div>
  )
}
```

## Props

### Navbar

Hereda las props de `<header>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `position` | `"sticky" \| "fixed"` | `"sticky"` | `sticky` (default) ocupa su alto; `fixed` se superpone al contenido. |
| `scrollThreshold` | `number` | `12` | Cuántos px de scroll prenden `data-scrolled`. La barra no cambia: es para quien quiera cambiar algo al bajar. |
| `surfaceClassName` | `string` | — | Clases de la caja con fondo. |
| `variant` | `"bar"` | — | **Obsoleta**: `bar` se acepta y no hace nada (se borra en 3.0). `floating` se fue. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### NavbarContent

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `maxWidth` | `number \| string` | — | El ancho de la columna del sitio (`1448`, `"80rem"`): la barra sigue a todo el ancho y su contenido se centra en esa columna, alineado con los bloques de abajo. |
| `style` | `CSSProperties` | — | Se suma al `maxWidth` de la columna; lo que pongas gana. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Recorre los links y botones de adentro. La barra en sí no recibe foco. |

## Accesibilidad

- Es un `<header>` (landmark `banner` cuando está en el body). La navegación de adentro va en un `<nav>` con `aria-label` propio.
- Es translúcida (`material-translucent`). Fuera del wallpaper lleva un fill más denso (`--sf-translucent-bar`, 88 %): el texto y el secundario llegan a 4,5:1 aunque debajo pase blanco o negro puro, en los dos temas. Sobre el wallpaper (`data-ambient`) usa el de `material-translucent`, y el texto llega a 4,5:1 sobre cualquier punto del wallpaper. Con `prefers-reduced-transparency` o `prefers-contrast: more` es la barra opaca (`surface-header`).

## Reglas de uso

- `NavbarContent` termina a 16 del borde, como empieza: un avatar, un segmentado o un botón de texto al final no quedan pegados. Si lo último es un botón de ícono (`size="icon-*"`), a 10, y su aire completa los 16 hasta el glifo. Lo mismo las barras de `AppShell`. Una segunda fila con `Toolbar variant="plain"` adentro del `Navbar` lleva 4 de cada lado, así el texto de sus botones queda alineado. `maxWidth` centra el contenido en la columna del sitio.
- **Una sola barra, como iCloud**: a todo el ancho y sin cápsula. La píldora flotante de 1.x se fue en 2.0.
- Los links de la barra son `NavbarLink` (`sebs7n-ui/navbar-link`), no botones `ghost`: texto `label-secondary` que pasa a `label` —más blanco en oscuro— con el puntero y en la página actual (`active`, que pone `aria-current`). El CTA («Ingresar», «Crear cuenta») sí es un `Button`, con el acento. Para un control de ícono con el mismo color, `navbarLinkClassName({ icon: true })`.
- `position="fixed"` cuando el hero tiene que llegar hasta el borde de arriba; `sticky` (el default) en todo lo demás, para que el contenido no quede tapado.
- Una sola fila de 44px (`NavbarContent`, `0 6px 0 16px`): la marca a la izquierda, botones de ícono de 36 y un avatar de 28 a la derecha.
- Dentro de un `AppShell` no va: la barra global es su prop `header`, **opaca** adentro de una app (como Mail o Drive, donde el contenido scrollea adentro de los paneles, no debajo de la barra) y translúcida sobre el wallpaper (`AppShell ambient`).

## Relacionados

[navbar-link](/docs/components/navbar-link.md) · [navigation-menu](/docs/components/navigation-menu.md) · [user-menu](/docs/components/user-menu.md) · [theme-switcher](/docs/components/theme-switcher.md) · [footer](/docs/components/footer.md)