Menu

Menu is a container that presents a selection of choices or actions for a user to choose from. The user opens it with a customizable trigger, e.g., an interactive element such as a button, or an interaction, such as right mouse click or keyboard shortcut.

Also known as: Cascading Menu
View source code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Keyboard interactions

KeyFunction
Tab

If focus is on a menu item, Tab closes the menu and moves focus to the next focusable element in the tab order.

Shift + Tab

If focus is on a menu item, this action closes the menu and moves focus to the previous focusable element in the tab order.

Space / Enter
  • If focus is on the menu trigger, this action opens the menu and places focus on the first menu item.
  • When focus is on a menu item that has a submenu, this action opens the submenu and places focus on its first item.
  • Otherwise, this action activates the item, and closes the menu.
Up arrow

When focus is in a menu, Up arrow moves focus to the previous item.

Down arrow

When focus is in a menu, Down arrow moves focus to the next item.

Right arrow

When focus is in a menu and on a menu item that has a submenu, Right arrow opens the submenu and places focus on its first item.

Left arrow

When focus is in a submenu of an item in a menu, Left arrow closes the submenu and returns focus to the parent menu item.

Escape

Escape closes the menu, and sets focus to the element element that triggered opening the menu, e.g. a button or the parent menu item from which the menu was opened.