Skip to content
Alea0.1

Navigation

Menubar

A desktop-app menu bar (File, Edit, View) with the full WAI-ARIA keyboard model.

Ant Design: Menu mode="horizontal"

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

Examples

Props

Menubar props

A desktop-app menu bar (File, Edit, View): arrows move between menus, Enter or Down opens one (Radix Menubar, WAI-ARIA menubar).

PropTypeDefaultDescription
aria-labelrequiredstring-Name of the menu bar ("Editor").
menusrequired{ id: string; label: string; items: MenuEntry[]; }[]-The menus, left to right: a label and its items.
classNamestring-Extra class names for the root element.
onAction((menu: string, item: Key) => void)-Called with the menu id and the item id.

Accessibility

  • role menubar with roving focus: one Tab stop.
  • With a menu open, Left and Right move to the next menu.

Keyboard

KeyDoes
Arrow Left / RightMove between menus
Enter, Space or DownOpen
EscapeClose

Do and don't

Do

  • Use it for desktop-style apps with many commands.
  • Keep the top-level menus to six or fewer.

Don't

  • Don't use it for website navigation: use NavigationMenu.
  • Don't put frequent actions only in menus: add a toolbar.
Menu ContextMenu NavigationMenu
Tested with axe, keyboard and screen reader roles