Saltar al contenido
Alea0.1
Pro
  1. Alea
  2. Componentes
  3. Navegación
  4. Menu

Navegación

Menu

Una lista de acciones u opciones desde un botón: secciones, atajos, submenús y elementos marcables.

import { DropdownMenu, MenuItem, MenuSection, MenuSeparator, Submenu } from '@alea/ui';

Ejemplos

Acciones

Secciones, atajos, un elemento de peligro al final.

Seleccionable

selectionMode convierte los elementos en una opción simple o múltiple.

Encabezado, pie, contadores y tamaño pequeño

header y footer enmarcan los elementos con contenido que no recibe foco (quién inició sesión, una versión); end pone un contador o un badge en un elemento; size="sm" crea elementos de 32 px para apps densas.

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-text-muted…

Space

  • --alea-space-1…
  • --alea-space-2…
  • --alea-space-3…

Type

  • --alea-font-size-xs…

Props

DropdownMenu props

Un botón que abre un menú: dos tamaños, un encabezado y un pie, un ancho y un límite de altura.

PropTipoPor defectoDescripción
triggerobligatoriaReactNode-El botón que lo abre (normalmente un Button o IconButton).
aria-labelstring-Nombre del menú; por defecto el nombre del disparador.
footerReactNode-Contenido debajo de los elementos, sin foco: una versión, una pista.
headerReactNode-Contenido sobre los elementos, sin foco: quién inició sesión, un plan.
maxHeightnumber-Altura máxima antes de tener scroll, en px.
menuPropsOmit<MenuProps<T>, "children">-Props del menú: onAction, selectionMode, selectedKeys, items, disabledKeys...
minWidthstring | number-Ancho mínimo del menú, cualquier medida CSS. Por defecto 200 px.
motionMotionProp-Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
placement"start" | "end" | "bottom end" | "bottom start" | "bottom" | "top" | "bottom left" | "bottom right" | "top left" | "top right" | "top start" | "top end" | "l…'bottom start'Dónde se abre. Por defecto bottom start.
size"sm" | "md"-sm (elementos de 32 px) o md (40 px, por defecto).

MenuItem props

Un elemento: una acción, un enlace (href), o una opción en un menú seleccionable.

PropTipoPor defectoDescripción
descriptionReactNode-Una segunda línea bajo la etiqueta.
endReactNode-Algo al final: un contador, un badge, un estado.
iconReactNode-Ícono antes de la etiqueta.
shortcutstring-Un atajo mostrado a la derecha, por ejemplo ⌘D. Solo visual: conecta tú las teclas.
tone"danger" | "default"'default'danger lo pone en rojo, para acciones destructivas.

MenuSection props

PropTipoPor defectoDescripción
childrenobligatoriaReactNode-Los MenuItems.
titleReactNode-El título del grupo.

Submenu props

Un elemento que abre otro menú (flecha derecha o hover).

PropTipoPor defectoDescripción
labelobligatoriaReactNode-El elemento que abre el submenú.
iconReactNode-Un ícono antes de la etiqueta del elemento.

Menu props

Una lista de acciones u opciones. Las flechas se mueven, escribir salta, Enter elige.

PropTipoPor defectoDescripción
size"sm" | "md"-sm (elementos de 32 px, para apps densas y menús contextuales) o md (40 px, por defecto).

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.

DropdownMenu

Variantes
placementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…
sizesmmd
Motion
Acepta 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-menu-popover.alea-menu-header.alea-menu-footer

MenuItem

Variantes
tonedangerdefault
Estados
FocusOpen
Motion
staggertint
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-menu-item.alea-menu-check.alea-option-icon.alea-option-text.alea-option-desc.alea-menu-end.alea-menu-shortcut.alea-menu-chevron
Atributos data
data-tone=dangerdata-ondata-size=sm

MenuSection

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-option-section.alea-option-header

Submenu

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-menu-popover

Menu

Variantes
sizesmmd
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-menu
Atributos data
data-size=sm

Accesibilidad

  • Un menú nombrado por su disparador; los elementos son menuitem, menuitemradio o menuitemcheckbox.
  • Al escribir salta a los elementos; el foco vuelve al disparador al cerrar.

Teclado

TeclaAcción
Enter, Espacio, Flecha abajoAbre el menú
FlechasSe mueven entre elementos
Flecha derecha / IzquierdaAbre o cierra un submenú
EscapeCierra
LetrasSalta a un elemento

Qué hacer y qué evitar

Hacer

  • Pon los elementos destructivos al final, con tone="danger".

Evitar

  • No escondas la acción principal en un menú.
  • No uses un menú para elegir el valor de un formulario: usa Select.
Select CommandPalette IconButton
Probado con axe, teclado y roles de lector de pantalla