Skip to content

Menu Button Pattern

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

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, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it 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.
Back to Top