Action Menu

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


PublishedElement can be used in production
PublishedElement can be used in production
In backlogElement is in backlog
In backlogElement is in backlog
PublishedElement can be used in production

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.


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 action menu includes three main elements:

  1. Label: describes the action or option the user may select.
  2. Divider: visually separates the actions.
  3. Destructive item.

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.


Menu guidelines

Read the Nielsen Norman Group's guidance.

Accot-Zhai Steering Law in UI

Read the Nielsen Norman Group's article.