components icon

Action Menu

An action menu presents users with additional options when there are space constraints within a layout.

Status

Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
Web Components
In backlogElement is in backlog

What's new

Action menu is a new component for the Dell Design System v2. It incorporates the updated foundations, including the new font ramp and color palette.

When to use

ComponentUse case
Action menuUse action menu if you have limited space and need to display overflow actions in a list. A selection should trigger the action immediately, and can include both single-select and multi-select options.
DropdownUse the dropdown component to filter, sort, or change page content. Unlike the select component, dropdown can be styled to match the look and feel of a product or application. Dropdowns accommodate multiple concurrent selections, filtering, and grouping to accommodate long lists.

Anatomy

The action menu component is a container with a menu related to the task at hand, or when space constraints dictate that menu items are placed behind a single trigger element. The trigger is paired with the menu, but is not part of the component architecture. Multiple items in a menu are grouped by type of action or option and divided with a visual separator or with group titles. Destructive actions should always be separated visually and located at the bottom of the menu. Use only universally recognized icons to represent actions or options.

The anatomy of the action menu, labeled 1, 2 and 3.

The action menu includes two main elements:

  1. Label: describes the action or option the user may select.
  2. Divider: visually separates the actions.
  3. Destructive item.
The anatomy of the group menu, labeled 1 through 3.

The grouped menu includes all of the elements from the action menu with the following additions:

  1. Group label: describes the category of actions or options that are listed beneath.
  2. Icon (optional): provides a visual representation of the action.
  3. Check icon: visual representation of an activated option item that appears to the right of the item. Note check icons only apply to multi-select options and not single-select actions.

Articles

Menu guidelines

Read the Nielsen Norman Group's guidance