Menu Button

Purpose

A menu button reveals a list of related actions when activated. Unlike a select or combobox, a menu button triggers actions rather than selecting a value.

Usage Guidance

Use for groups of actions (e.g., “Export as PDF”, “Export as CSV”)
Do not use for navigation (use a nav element)
Do not use for selecting a value (use select or combobox)
Keyboard interaction follows the ARIA Menu Button pattern

Accessibility Considerations

The trigger has aria-haspopup="menu" and aria-expanded
The menu container has role="menu"
Each menu item has role="menuitem"
Focus moves into the menu when opened

Keyboard Support

Key	Action
`Enter` / `Space` / `Down Arrow`	Open menu; move focus to first item
`Up Arrow`	Open menu; move focus to last item
`Arrow Down`	Move to next menu item
`Arrow Up`	Move to previous menu item
`Home`	Move to first menu item
`End`	Move to last menu item
`Escape`	Close menu; return focus to button
`Tab`	Close menu; move focus to next element

Screen readers announce “button, has popup” and “expanded/collapsed” state. Within the menu, items are announced as “menu item.”

ARIA Requirements

aria-haspopup="menu" on the trigger button
aria-expanded="true|false" on the trigger button
role="menu" on the dropdown container
role="menuitem" on each action item

Common Mistakes

Using role="menu" for navigation (use <nav> instead)
Omitting aria-haspopup on the trigger
Not implementing full arrow-key navigation within the menu
Using checkboxes or radios inside a role="menu" without role="menuitemcheckbox" or role="menuitemradio"

Live Example

Code Example

<div class="menu-button">
  <button
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
  >
    Actions
  </button>
  <ul role="menu" hidden>
    <li>
      <button role="menuitem" type="button">Action One</button>
    </li>
    <li>
      <button role="menuitem" type="button">Action Two</button>
    </li>
  </ul>
</div>

See main.js for keyboard navigation implementation.