Action menu
An action menu is a dropdown list of multiple context-specific actions.
When to use it#
An action menu is the same as a context menu, apart from the trigger action. A context menu is triggered by right-clicking into a dedicated area. An action menu is triggered via a dedicated button. Use an action menu to provide users with several actions related to a specific item or context, such as managing settings, performing operations on a selected item, or initiating workflows. The component consolidates actions, helps reduce cognitive load, and facilitates efficient navigation and interaction.
Do
When not to use it#
Don’t use an action menu when only one or two actions are available, as this may overcomplicate the interface. Consider using a set of primary and secondary buttons.
Don’t use an action menu for multiple actions that are always visible and accessible.
Don't
How to use it#
Visual representation#
An action menu is a dropdown list launched from the button variant. The dropdown list appears when users interact with the button.
States#
Action menu items have the following states:
- default
- hover – when a cursor is in the field or when focused
- disabled – consider using a tooltip to explain why an option is disabled
- hover
Interaction#
Users can navigate to the action menu using the Tab key and display the list using the down arrow key. Selecting an option from the dropdown menu opens a modal, a sidebar, fullscreen content, or performs an action.