Menu

Selector

button[aria-haspopup="menu"], [role="menu"], button[role="menuitem"]

Requires JavaScript

[data-functionality="menu"]

The menu is an interactive element that allows the user to select an action from a list of options. Unlike the select, radio, or checkboxes, the menu doesn't hold values for form submission. Instead it usually performas an action on the page. The component follows the recommendation of the WAI-ARIA authoring practices, thus requiring the mango.js file to manage the ARIA attributes and keyboard navigation. To provide a target for the script, add a wrapping div with the data-functionality="menu" attribute.

Follow the example below to properly construct the menu. The menu button should take an aria-controls attribute pointing to the menu container. That container should take an aria-labelledby attribute pointing to the menu button. Additionally, provide a starting tabindex of -1 to allow the script to handle focus management.

Variations

By using role="menuitemcheckbox" and aria-checked="false", each menu item will follow a checkbox pattern, where multiple items can be selected.

By using role="menuitemradio" and aria-checked, the menu container will follow a radio group pattern, only allowing one selection. Since the selection can't typically be cleared, provide a default checked option to let the user know that selection is permant or required.

Keyboard Navigation

The mango.js script adds keyboard navigation that follows WAI-ARIA's recommendation. If providing the functionality yourself, make sure to include these interactions.

• Menu Button
  • Clicking or pressing Space or Enter toggles the menu
  • Upon opening the menu, focus is set on the first item
• Menu Item
  • Pressing Enter activates the item and closes the menu for all three variations
    • On the checkbox menu item, the selection is toggled
    • On the radio menu item, selection is swapped to the item
  • Pressing Space activates the item and closes the menu only for the standard menu item.
    • On the checkbox menu item, the selection is toggled and the menu is kept open
    • On the radio menu item, selection is swapped to the item and the menu is kept open
  • Pressing Down Arrow moves focus to the next item
  • Pressing Up Arrow moves focus to the previous item
  • Pressing Home moves focus to the first item
  • Pressing End moves focus to the last item
  • Pressing Esc closes the menu
  • Pressing Tab closes the menu and moves focus to the next focusable element on the page

Clicking on a menu item will select the item and close the menu for standard menu items. For checkbox and radio menu items, the menu is kept open to provide feedback to the user of the change in selection.