Menu Button
About This Pattern
A menu button is a button that opens a menu. 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
- Navigation Menu Button: A menu button made from an HTML
aelement that opens a menu of items that behave as links. - Action Menu Button Example Using element.focus(): A menu button made from an HTML
buttonelement that opens a menu of actions or commands where focus in the menu is managed usingelement.focus(). - 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.
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 Menu or Menu bar.
WAI-ARIA Roles, States, and Properties
- The element that opens the menu has role button.
- The element with role
buttonhas aria-haspopup set to eithermenuortrue. -
When the menu is displayed, the element with role
buttonhas aria-expanded set totrue. When the menu is hidden, it is recommended thataria-expandedis not present. Ifaria-expandedis specified when the menu is hidden, it is set tofalse. - The element that contains the menu items displayed by activating the button has role menu.
-
Optionally, the element with role
buttonhas a value specified for aria-controls that refers to the element with rolemenu. - Additional roles, states, and properties needed for the menu element are described in Menu or Menu bar.