Action Menu

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	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

Component	Use case
Action menu	Use 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.
Dropdown	Use 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 action menu includes three main elements:

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

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

Group label: describes the category of actions or options that are listed beneath.
Icon (optional): provides a visual representation of the action.
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

Read the Nielsen Norman Group's guidance.

Read the Nielsen Norman Group's article.

Usage

Action menu is distinguished by a trigger that makes the menu appears. Once open, the menu shows a small set of actions and tools related to the experience, like edit, copy, and view settings. If the action or tool is critical, place it on the page so that the user doesn’t miss it. When organizing the menu list, place most commonly used items at the top and keep items grouped by type. Experience-ending actions, such as quit or sign out, should be at the bottom of the list. If an item in the menu doesn’t apply to the current experience, use an inactive state to prevent it from being selected.

Kinds

An action menu can accommodate three types of lists with variations as needed.

Single-select

Use a single-select action menu to present individual actions from a list. The selection performs the task and the menu closes.

Multi-select

Use multi-select when you want to persist individual selected options that affect the display. When an option is selected, it activates a check icon to the right. The menu persists while options are toggled on and off.

Grouped

Use groups to separate single-select action items from multi-select option items, or to create sets of similar items with indicated hierarchy. Groups may be indicated by group headings, separators, or both.

Interaction

Triggers

Action menus are opened by a trigger UI element for overflow items. Display triggers as buttons with a universally recognized icon, such as overflow. Avoid icons that could be mistaken for navigation or application settings, like gear or menu-closed. Note that the trigger is not part of the action menu component, but is shown here for interaction purposes.

With single-select menu

Use a single-select menu with a trigger when the menu will only contain items that causes it to close immediately after selection.

With multi-select menu

Use a multi-select menu with a trigger when the menu will persist after each option is selected.

With grouped menu

Use a grouped menu with a trigger when combining multi-select options and single-select actions in the same menu. Use a divider or group label to separate groups. Group labels are not selectable.

Overflow

Use action menu with the overflow icon as a trigger for hidden or complementary items that do not fit in view.

Chevron

Use action menu with a chevron-down trigger to alert users that there are more actions or items available.

Standards

Accessibility

Make sure all action menu labels are clear, concise, and consistent
Use short, unique labels that accurately describe the action(s) that will happen if selected. If the same action menu item is available in an additional place, make sure the label is consistent.
WCAG 2.1: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, 4.1.2 Name, Role, Value

Make sure that any icon-only triggers have an accessible name provided
If you use an icon-only trigger button (such as dds__icon–overflow or dds__icon–ellipsis), make sure that an accessible name is provided for screen readers.
WCAG 2.1: 1.3.1 Info and Relationships

Content

Trigger labels
If using text or a button with text as a trigger, avoid verbs that imply selecting the trigger will perform an action. The trigger isn’t performing an action, the items within the action menu perform the action.
Do: More
Don’t: Edit

Menu text
Use one- or two-word labels for items within the menu for visual comprehension. Group similar actions together. If a menu item is longer than two words, it likely belongs in a regular navigation menu.
Do: Edit, View, Share
Don’t: Edit this item; View more information; Share on Facebook

Group titles
If possible, use one-word titles for groups of similar items within the action menu.
Do: Layout
Don’t: Layout controls

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div class="dds__action-menu" data-dds="action-menu" data-trigger="#action-menu">
  <button id="action-menu" type="button" class="dds__button dds__button--secondary">Action Menu</button>
  <div class="dds__action-menu__container" tabindex="-1" role="presentation" aria-hidden="true">
    <ul class="dds__action-menu__menu" role="menu" tabindex="-1">
      <li role="presentation">
        <span id="actions-group" class="dds__action-menu__group__title">Actions</span>
        <ul role="group" aria-labelledby="actions-group">
          <li class="dds__action-menu__item" role="none">
            <button type="button" role="menuitem" tabindex="-1" onclick="alert('Copy')">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--copy-alt"></use>
              </svg>
              <span>Copy</span>
            </button>
          </li>
          <li class="dds__action-menu__item" role="none">
            <button type="button" role="menuitem" tabindex="-1" onclick="alert('Cut')">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--missing-image"></use>
              </svg>
              <span>Cut</span>
            </button>
          </li>
          <li class="dds__action-menu__item" role="none">
            <button type="button" role="menuitem" tabindex="-1" onclick="alert('Paste')">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--copy"></use>
              </svg>
              <span>Paste</span>
            </button>
          </li>
        </ul>
      </li>
      <li class="dds__action-menu__separator" role="separator"></li>
      <li role="presentation">
        <span id="selection-group" class="dds__action-menu__group__title">View Strategy</span>
        <ul role="group" aria-labelledby="selection-group">
          <li class="dds__action-menu__option" role="none">
            <button type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="false" data-value="columns">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--view-column"></use>
              </svg>
              <span>View Columns</span>
            </button>
          </li>
          <li class="dds__action-menu__option" role="none">
            <button type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="true" data-value="rows">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--view-row"></use>
              </svg>
              <span>View Rows</span>
            </button>
          </li>
          <li class="dds__action-menu__option" role="none">
            <button type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="false" data-value="grid">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--view-table"></use>
              </svg>
              <span>View Grids</span>
            </button>
          </li>
        </ul>
      </li>
      <li class="dds__action-menu__separator" role="separator"></li>
      <li role="presentation">
        <ul role="group" aria-label="Useful Links">
          <li class="dds__action-menu__link" role="none">
            <a href="https://www.dell.com" target="_blank" role="menuitem" tabindex="-1">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--alert-info-cir"></use>
              </svg>
              <span>Help</span>
            </a>
          </li>
          <li class="dds__action-menu__link" role="none">
            <a href="https://www.dell.com" target="_blank" role="menuitem" tabindex="-1">
              <svg aria-hidden="true" class="dds__action-menu__icon">
                <use xlink:href="#dds__icon--log-out"></use>
              </svg>
              <span>Log out</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Copy code

View the action menu demo and code in Vanilla.

Action Menu

Status

Contents

What's new

When to use

Anatomy

Articles

Menu guidelines

Accot-Zhai Steering Law in UI

Contents

Contents

Usage

Kinds

Single-select

Multi-select

Grouped

Interaction

Triggers

With single-select menu

With multi-select menu

With grouped menu

Overflow

Chevron

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Action Menu

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

ArticlesCopy link to this section

Menu guidelines

Accot-Zhai Steering Law in UI

Contents

Vanilla

What's new

When to use

Anatomy

Articles