# NavbarLink

> El link de texto de la barra: secundario en reposo y más fuerte con el puntero y en la página actual, como los de icloud.com.

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

Sin `"use client"`: sirve en un Server Component.

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

```tsx
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

### 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

| Tecla | Qué hace |
|---|---|
| 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](/docs/components/navbar.md) · [text-link](/docs/components/text-link.md) · [navigation-menu](/docs/components/navigation-menu.md)