Navegación

Navbar

Un encabezado de sitio con marca, enlaces (con mega menús) y acciones; por debajo de un breakpoint los enlaces pasan a un drawer detrás de la hamburguesa.

import { Navbar } from '@alea/ui';

Ejemplos

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-bg…
--alea-border…

Space

--alea-space-2…
--alea-space-4…
--alea-space-6…

Type

--alea-font-family-body…
--alea-font-size-lg…
--alea-font-weight-semibold…

Layer

--alea-z-sticky…

Component

--alea-glass-blur…
--alea-glass-saturate…
--alea-glass-tint…

Other

--alea-breakpoint-xl…

Props

`Navbar` props

Un encabezado de sitio: marca, enlaces con mega menús opcionales, acciones; en pantallas pequeñas los enlaces pasan a un drawer.

Prop	Tipo	Por defecto	Descripción
`brand`obligatoria	`ReactNode`	-	El logo o nombre, normalmente un enlace al inicio.
`items`obligatoria	`NavItem[]`	-	Los enlaces: los mismos items que NavigationMenu (enlaces, o grupos con paneles).
`actions`	`ReactNode`	-	Cosas a la derecha: interruptor de tema, iniciar sesión, una llamada a la acción. También se muestran en el drawer en pantallas pequeñas.
`aria-label`	`string`	-	Nombre de la navegación. Por defecto "Principal".
`className`	`string`	-
`collapseBelow`	`"sm" \| "md" \| "lg"`	`'md'`	Por debajo de este ancho los enlaces pasan a un drawer detrás de una hamburguesa. Por defecto md (768 px).
`current`	`string`	-	El href de la página actual.
`sticky`	`boolean`	`true`	Se queda fijo arriba al hacer scroll, con un fondo desenfocado. Por defecto true.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: collapseBelowsmmdlg
Motion: scroll
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-navbar.alea-navbar-inner.alea-navbar-brand.alea-navbar-links.alea-navbar-actions.alea-navbar-burger.alea-navbar-drawer.alea-navbar-drawer-actions
Atributos data: data-stickydata-collapse=smdata-collapse=mddata-collapse=lg

Un landmark de encabezado con una navegación con nombre; el drawer es un diálogo que atrapa el foco y lo devuelve a la hamburguesa.
La página actual tiene aria-current tanto en la barra como en el drawer.

Teclado

Tecla	Acción
`Tab`	Recorre los enlaces y las acciones
`Enter` o `Espacio (hamburguesa)`	Abre el drawer del menú
`Escape`	Cierra el drawer

Qué hacer y qué evitar

Hacer

Limita el nivel superior a cinco enlaces o menos.
Pon la llamada a la acción principal en actions.

Evitar

No escondas la búsqueda en móvil si es la forma principal de entrar.