Menu Button Pattern

Read This First

No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why.

Menu Button Pattern

About This Pattern

A menu button is a button that opens a menu as described in the Menu and Menubar Pattern. It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu.

Examples

Action Menu Button Example Using aria-activedescendant: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.
Action Menu Button Example Using element.focus(): A menu button made from an HTML button element that opens a menu of actions or commands where focus in the menu is managed using element.focus().
Navigation Menu Button: A menu button made from an HTML a element that opens a menu of items that behave as links.

Keyboard Interaction

With focus on the button:
- Enter: opens the menu and places focus on the first menu item.
- Space: Opens the menu and places focus on the first menu item.
- (Optional) Down Arrow: opens the menu and moves focus to the first menu item.
- (Optional) Up Arrow: opens the menu and moves focus to the last menu item.
The keyboard behaviors needed after the menu is open are described in the Menu and Menubar Pattern.

WAI-ARIA Roles, States, and Properties

The element that opens the menu has role button.
The element with role button has aria-haspopup set to either menu or true.
When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, aria-expanded is set to false.
The element that contains the menu items displayed by activating the button has role menu.
Optionally, the element with role button has a value specified for aria-controls that refers to the element with role menu.
Additional roles, states, and properties needed for the menu element are described in the Menu and Menubar Pattern.