Navegación

Navegación del sitio en dos orientaciones. Horizontal: una barra superior con paneles desplegables de enlaces (mega menús). Vertical: una barra lateral con grupos anidados que se abren en su lugar, títulos de sección, divisores, badges e íconos, un modo acordeón, tres tamaños y un riel colapsado de íconos con tooltips y menús flotantes.

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

Ejemplos

Encabezado con mega menús

Paneles de enlaces con íconos y descripciones.

Solo enlaces

Sin paneles es una navegación de encabezado simple y accesible.

Vertical

orientation="vertical" crea un menú lateral: los grupos se abren en su lugar y se pueden anidar, los títulos de sección y divisores lo organizan, los badges cuentan cosas. Los grupos que contienen la página actual empiezan abiertos.

Riel colapsado

collapsed convierte el menú vertical en un riel de íconos: las etiquetas aparecen como tooltips con hover y foco, y los grupos se abren como menús flotantes al costado. Altérnalo con un botón.

Acordeón y tamaños

accordion mantiene un grupo abierto a la vez; size define las filas: sm 32 px, md 36 px, lg 44 px (las pantallas táctiles tienen 44 px de todos modos).

Riel de navegación

collapsed con railLabels mantiene etiquetas cortas bajo los íconos, para tablets y apps de escritorio con pocos destinos principales.

Responsive

Horizontal: ponlo en un Navbar; por debajo de su breakpoint collapseBelow el Navbar lo oculta y abre los mismos elementos como menú vertical en un drawer.
Vertical: en la barra lateral de un AppShell; activa collapsed en anchos de tablet para que el contenido siga ancho.
Las pantallas táctiles tienen filas de 44 px automáticamente.

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-accent-strong…
--alea-accent-subtle…
--alea-border…
--alea-gradient-accent-linear…
--alea-surface-hover…
--alea-surface-overlay…
--alea-surface-raised…
--alea-text…
--alea-text-muted…

Space

--alea-space-2…
--alea-space-3…

Radius

--alea-radius-full…
--alea-radius-lg…
--alea-radius-md…
--alea-radius-sm…

Type

--alea-font-family-body…
--alea-font-size-md…
--alea-font-size-sm…
--alea-font-weight-medium…
--alea-font-weight-semibold…

Shadow

--alea-shadow-pop…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-ease-out…

Layer

--alea-z-dropdown…

Props

`NavigationMenu` props

Una navegación de encabezado de sitio con paneles desplegables (mega menús), con el patrón disclosure: los botones abren paneles de enlaces.

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`NavItem[]`	-	Enlaces, grupos (anidados en menús verticales), títulos de sección ({ section: 'Workspace' }) y divisores ({ divider: true }).
`accordion`	`boolean`	-	Solo vertical: abrir un grupo cierra los hermanos abiertos.
`aria-label`	`string`	-	Nombre de la navegación. Por defecto "Principal".
`className`	`string`	-	Clases extra para el elemento raíz.
`collapsed`	`boolean`	-	Solo vertical: un riel de íconos; las etiquetas aparecen como tooltips y los grupos se abren como menús flotantes al costado.
`current`	`string`	-	El href de la página actual (recibe aria-current; sus grupos se abren).
`onNavigate`	`((href: string, event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)`	-	Se llama cuando se elige un enlace, con su href: úsalo para enrutar en el cliente (llama preventDefault en el evento).
`orientation`	`"horizontal" \| "vertical"`	-	horizontal (una barra superior con paneles desplegables, por defecto) o vertical (una barra lateral con grupos anidados).
`railLabels`	`boolean`	-	Con collapsed: etiquetas cortas bajo los íconos (un riel de navegación) en lugar de tooltips.
`size`	`"sm" \| "md" \| "lg"`	-	Solo vertical: sm (filas de 32 px), md (36 px, por defecto) o lg (44 px).

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: orientationhorizontalvertical
sizesmmdlg
Estados: Hover (CSS)Current
Motion: pop press morph tint
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-navmenu.alea-navmenu-list.alea-navmenu-li.alea-navmenu-item.alea-navmenu-chevron.alea-navmenu-panel.alea-navmenu-links.alea-navmenu-link.alea-navmenu-icon.alea-navmenu-title.alea-navmenu-desc.alea-navmenu-footer
Atributos data: data-cols=2

El patrón disclosure: botones con aria-expanded abren grupos de enlaces simples, que es lo que esperan quienes usan lectores de pantalla en la navegación de un sitio (no un menú de aplicación).
La página actual tiene aria-current, y los grupos que la contienen empiezan abiertos.
En el riel colapsado las etiquetas siguen en la página, ocultas visualmente, así cada enlace y grupo conserva su nombre; el tooltip es solo visual.
Los enlaces deshabilitados son aria-disabled y las flechas los saltan.
Los divisores son decorativos y están ocultos para lectores de pantalla; los títulos de sección son texto simple.

Teclado

Tecla	Acción
`Tab`	Se mueve por los elementos
`Flecha abajo` / `Arriba`	Fila visible siguiente o anterior (vertical)
`Inicio` / `Fin`	Primera o última fila (vertical)
`Flecha derecha`	Abre un grupo (vertical)
`Flecha izquierda`	Cierra el grupo, o va a su padre (vertical)
`Enter` o `Espacio`	Abre un grupo o sigue un enlace
`Escape`	Cierra el panel o menú flotante abierto y devuelve el foco

Qué hacer y qué evitar

Hacer

Dale a cada enlace una descripción corta en los mega menús.
Marca la página actual con current.
Usa el menú vertical en apps con muchas secciones, y títulos de sección para agruparlas.
Pasa onNavigate para enrutar en el cliente, y cierra desde ahí el drawer en móvil.

Evitar

No anides más de tres niveles en un menú vertical.
No abras paneles solo con hover: se abren con clic y con el teclado.
No dejes los elementos del riel colapsado sin íconos: se muestra la primera letra.