Todos los componentes (204)

Barra de menús

Navegación · Menubar · .amset-menubar

Qué es y cuándo usarlo

Una barra de menús como las de una aplicación de escritorio: Archivo, Editar, Ver, cada uno con su lista de acciones.

Cuándo usarlo

En una herramienta con muchas acciones agrupadas por tema: un editor, un panel de administración, un visor.
Cuando quien la usa espera pasar de un menú a otro con el ratón o con las flechas sin cerrarlos.

Cuándo no

Para las acciones de una fila o de un objeto concreto: es un ActionMenu.
Para la navegación de un sitio, que son enlaces: es un NavigationMenu.
Con menos de tres menús: bastan botones o un ActionMenu.

Teclado: la barra es un solo tabulador y las flechas izquierda y derecha pasan de un menú al vecino dando la vuelta (al revés en un idioma de derecha a izquierda). Abajo o Intro abren y entran por la primera acción, arriba entra por la última; con un menú abierto, las flechas laterales abren el vecino. Escribir salta a la acción que empieza así. Escape cierra devolviendo el foco, y Tab cierra y sigue hacia fuera.

Accesibilidad: es un role="menubar" con nombre; cada menú es un menuitem con aria-haspopup y aria-expanded. Un menú apagado lleva aria-disabled y no se alcanza con el teclado. Las acciones, los submenús y las secciones son los de ActionMenu.

Con el ratón: con un menú abierto, pasar por otro lo abre; con todos cerrados no abre nada. Por eso es una capa no modal, a diferencia de ActionMenu, que deja inerte el resto de la página.

Aspecto fino: variable CSS --amset-menubar-height (alto de cada botón de la barra).

Cómo se ve

Abre un menú y pasa al de al lado con las flechas.

<Menubar
  label="Menú de la aplicación"
  menus={[
    { key: "archivo", label: "Archivo", actions: [{ key: "nuevo", label: "Nuevo pedido", detail: "Ctrl+N" }] },
    { key: "editar", label: "Editar", actions: [{ key: "deshacer", label: "Deshacer", detail: "Ctrl+Z" }] },
  ]}
  onSelect={(accion, menu) => ejecutar(menu, accion)}
/>

Props

Se importa con import { Menubar } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Qué es la barra, para el lector de pantalla: «Menú de la aplicación».
`menus`obligatoria	`readonly MenubarMenu[]`	—
`onSelect`obligatoria	`(key: string, menu: string) => void`	Se llama con la acción elegida y el menú al que pertenece, y el menú se cierra.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`minWidth`	`string`	—
`offset`	`number`	Separación en píxeles entre la barra y el panel.
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-menubar-height`	`var(--amset-height-control)`

Cómo se cambia

.amset-menubar {
  --amset-menubar-height: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: