Navbar

Ejemplos

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>
  )
}

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

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Teclado

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