← All patterns · Navigation widgets

Menu

A list of choices, often hierarchical, presented for selection.

Pattern

A menu offers a list of actions or links. Menus may be nested (submenus) and support roving-tabindex keyboard navigation. The menu's container is a region the user enters from a trigger button, then exits with Escape.

Roles

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio

States and properties

aria-haspopup
On the trigger button; identifies the popup type.
aria-expanded
On the trigger; reflects whether the menu is open.
aria-checked
On menuitemcheckbox / menuitemradio.

Keyboard interaction

Up / Down arrow
Move between items.
Right / Left arrow
Open submenu / return to parent.
Escape
Close the menu, return focus to trigger.
Enter or Space
Activate item.

WCAG criteria

  • 2.1.1 — Keyboard
  • 2.1.2 — No Keyboard Trap

Canonical reference

WAI-ARIA Authoring Practices Guide — Menu

More