Action menu
Action menu is composed of action list and overlay patterns used for quick actions and selections.
On this page
On this page
Usage
Action menu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.
Anatomy
Options
The trigger button can be a standard or icon button. For single select menus that display the selection in the trigger, a label must be persist either internally or externally.
Menus can contain simple actions and links, single select items, or multi select items.
Behavior
Opening
Open by clicking the trigger button with a mouse
Open by focusing the trigger button and hitting return, space, or any arrow key
Closing
Default behavior
Close the menu by clicking on an item, clicking on the trigger, or clicking anywhere outside the menu.
Close the menu by hitting enter on an item, or esc.
Single and multi select
Single select menu closes upon selection and may update the button label.
Multi select menu closes upon selection and can be re-opened to select more options.
Responsive
Narrow viewports
For narrow viewports, ActionMenu should remain anchored to its trigger and stay within the bounds of the viewport.Best practices
Use ActionMenu for quick actions.
For complex interactions, use SelectPanel.
Use ActionMenu for simple selection.
Use SelectPanel for a filtered search.
Use a button to open a menu.
Don’t use a link to open a menu.
Accessibility
See focus management for more information.
Menu mnemonics
When a menu is open, hitting a letter key for the first letter in an item to be selected will move focus to that item. If two items have the same first letter, the first item in the list will be focused first, and hitting the letter key again will focus the next item.Keyboard navigation
Trigger button
| Key | Description |
|---|---|
| Enter | Opens the menu. |
| Space | Opens the menu. |
| ArrowDown | Opens the menu. |
| ArrowUp | Opens the menu. |
| ArrowLeft | Opens the menu. |
| ArrowRight | Opens the menu. |
Menu items
| Key | Description |
|---|---|
| ArrowUp | Cycle through items starting with current item to previous item |
| ArrowDown | Cycle through items starting with current item to next item |
| ArrowLeft | Cycle through items starting with current item to previous item |
| ArrowRight | Cycle through items starting with current item to next item |
| Home | Move focus to first item |
| PageUp | Move focus to first item |
| End | Move focus to last item |
| PageDown | Move focus to last item |
| Esc | Close menu |