Navegación

Menubar

Una barra de menús de app de escritorio (Archivo, Editar, Ver) con el modelo de teclado completo de WAI-ARIA.

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

Ejemplos

Barra de menús de app

Las flechas se mueven entre menús; con uno abierto, Izquierda y Derecha cambian de menú.

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-border…
--alea-surface…
--alea-surface-hover…
--alea-text…

Radius

--alea-radius-md…

Type

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

Props

`Menubar` props

Una barra de menús de app de escritorio (Archivo, Editar, Ver): las flechas se mueven entre menús, Enter o Abajo abre uno (menubar de WAI-ARIA).

Prop	Tipo	Por defecto	Descripción
`aria-label`obligatoria	`string`	-	Nombre de la barra de menús ("Editor").
`menus`obligatoria	`{ id: string; label: string; items: MenuEntry[]; }[]`	-	Los menús, de izquierda a derecha: una etiqueta y sus items.
`className`	`string`	-	Clases extra para el elemento raíz.
`motion`	`MotionProp`	-	Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
`onAction`	`((menu: string, item: Key) => void)`	-	Se llama con el id del menú y el id del elemento.

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.

Estados: Hover (CSS)
Motion: press tintAcepta una prop motion para su entrada y salida.
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-menubar.alea-menubar-slot.alea-menubar-item.alea-menu-popover.alea-menu

role menubar con foco itinerante: una sola parada de Tab.
Con un menú abierto, Izquierda y Derecha pasan al siguiente menú.

Teclado

Tecla	Acción
`Flecha izquierda` / `Derecha`	Moverse entre menús
`Enter`, `Espacio` o `Abajo`	Abrir
`Escape`	Cerrar

Qué hacer y qué evitar

Hacer

Úsala en apps de estilo escritorio con muchos comandos.
Limita los menús principales a seis o menos.

Evitar

No la uses para navegar un sitio web: usa NavigationMenu.
No pongas acciones frecuentes solo en menús: agrega una barra de herramientas.