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, 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.
Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.