sebs7n-ui

NavegaciónServer Component

import { NavbarLink } from "sebs7n-ui/navbar-link"

Ejemplos

En la barra

Secundarios en reposo, más fuertes con el puntero y en la página actual. El CTA va aparte, con el acento.

import { BellIcon } from "lucide-react"
import { Button } from "sebs7n-ui/button"
import { NavbarLink } from "sebs7n-ui/navbar-link"
import { navbarLinkClassName } from "sebs7n-ui/variants/navbar-link"

function EnLaBarra() {
  return (
    <nav aria-label="Demo de links de la barra" className="flex items-center gap-1 rounded-surface bg-surface-header px-4 py-2">
      <NavbarLink active href="#facturas">
        Facturas
      </NavbarLink>
      <NavbarLink href="#clientes">Clientes</NavbarLink>
      <NavbarLink href="#ayuda">Ayuda</NavbarLink>
      <button aria-label="Avisos" className={navbarLinkClassName({ icon: true })} type="button">
        <BellIcon />
      </button>
      <Button className="ml-2" size="sm">
        Ingresar
      </Button>
    </nav>
  )
}

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».

NavbarLink

Hereda las props de <a>.

Prop	Tipo	Por defecto	Descripción
`active`	`boolean`	`false`	La página actual: la pinta en `label` y pone `aria-current="page"`.
`icon`	`boolean`	`false`	Un ícono solo, en el cuadrado de 28. Pide `aria-label`.
`render`	`RenderElement`	—	El link del router: `render={<Link href="/ayuda" />}`. Sus props ganan.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Enter: Sigue el link.
Tab: Entra y sale.

Accesibilidad

Es un <a> real, sin "use client": sirve en un Server Component y se puede abrir en otra pestaña.
active pone aria-current="page": el lector anuncia la página actual, no solo el color.
En reposo va en label-secondary (≥ 4,5:1 sobre la barra) y el activo en label. Con icon, el ícono solo pide aria-label.

Reglas de uso

Los links de un Navbar van con NavbarLink, no con botones ghost: se leen como texto, y el activo se marca por el color, sin relleno ni subrayado.
El CTA de la barra («Ingresar», «Crear cuenta») sí es un Button, con el acento: es la acción, no un destino más.
Con next/link: render={<Link href="/ayuda" />}. Para un control de ícono de la barra con el mismo color (campana, carrito), navbarLinkClassName({ icon: true }) de sebs7n-ui/variants/navbar-link.

Relacionados

Navbar TextLink NavigationMenu