<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Action menu</td>
<td>Use the 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.</td>
</tr>
<tr>
<td><a href="/components/dropdown/">Dropdown</a></td>
<td>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.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>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. </p>
<p>The trigger is paired with the menu but is not part of the component architecture. </p>
<p>Multiple items in a menu are grouped by type of action or option and divided with a visual separator or with group titles. </p>
<p>Destructive actions should always be separated visually and located at the bottom of the menu. </p>
<p>Use only universally recognized <a href="/foundations/icons/">icons</a> to represent actions or options.</p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of the action menu, labeled 1, 2 and 3.","caption":"The action menu includes three main elements:\n\n1. Label: describes the action or option the user may select.\n2. Divider: visually separates the actions.\n3. Destructive item.","url":"https://dds.dell.com/site/production/ff/66/Action_Menu_Anatomy_5856516585.png"},{"alt":"The anatomy of the group menu, labeled 1 through 3.","caption":"The grouped menu includes all of the elements from the action menu with the following additions:\n\n1. Group label: describes the category of actions or options that are listed beneath.\n2. Icon (optional): provides a visual representation of the action.\n3. 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.","url":"https://dds.dell.com/site/production/04/1c/Action_Menu_Anatomy_Selected_3b8917a54d.png"}]' data-numberofcolumns='2'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/menu-design/","type":"External"},"title":"Menu guidelines","description":"Read the Nielsen Norman Group&#39;s guidance.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/steering-law/","type":"External"},"title":"Accot-Zhai Steering Law in UI","description":"Read the Nielsen Norman Group&#39;s article.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance AI chatbot interaction, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Action menu is distinguished by a trigger that makes the menu appear. 

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 directly 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.

<details data-name='image-block' data-images='[{"alt":"An action menu with single actions in a list.","caption":"","url":"https://dds.dell.com/site/production/57/af/Action_Menu_Kinds_Single_Select_91d1a5a65f.png"}]' data-numberofcolumns='1'></details>

### 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](/foundations/icons/) to the right. The menu persists while options are toggled on and off.

<details data-name='image-block' data-images='[{"alt":"An action menu with selectable options in a list.","caption":"","url":"https://dds.dell.com/site/production/0a/1b/Action_Menu_Kinds_Multi_Select_13f9453579.png"}]' data-numberofcolumns='1'></details>

### 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.

<details data-name='image-block' data-images='[{"alt":"An action menu with one group of action items, and one group of multi-select options.","caption":"","url":"https://dds.dell.com/site/production/1b/88/Action_Menu_Kinds_Grouped_6a1faac1db.png"}]' data-numberofcolumns='1'></details>

## Interaction

### Triggers

Action menus are opened by a trigger UI element for overflow items. 

Display triggers as buttons with a universally recognized [icon](/foundations/icons/), 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.

<details data-name='image-block' data-images='[{"alt":"Three states of an action menu being demonstrated, with the trigger being activated, the menu opening, and an item being selected.","caption":"","url":"https://dds.dell.com/site/production/fa/54/Action_Menu_Behaviors_Trigger_Single_Select_ec4110fabd.png"}]' data-numberofcolumns='1'></details>

#### With multi-select menu

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

<details data-name='image-block' data-images='[{"alt":"A demonstration of a multi-select action menu, with two options being selected and a third option under a hover state.","caption":"","url":"https://dds.dell.com/site/production/74/3f/Action_Menu_Behaviors_Trigger_Multi_Select_bb68254e73.png"}]' data-numberofcolumns='1'></details>

#### 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](/components/divider/) or group label to separate groups. Group labels are not selectable.

<details data-name='image-block' data-images='[{"alt":"A demonstration of a grouped action menu with the trigger being activated, a multi-select option being selected, and a hover state over a single-select item.","caption":"","url":"https://dds.dell.com/site/production/e3/76/Action_Menu_Behaviors_Trigger_Group_59682531cb.png"}]' data-numberofcolumns='1'></details>

#### Overflow

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

<details data-name='image-block' data-images='[{"alt":"A demonstration of an action menu triggered in an overflow scenario.","caption":"","url":"https://dds.dell.com/site/production/f1/08/Action_Menu_Overflow_2x_08fe9f5878.png"}]' data-numberofcolumns='1'></details>

#### Chevron

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

<details data-name='image-block' data-images='[{"alt":"A demonstration of an action menu triggered by a chevron-down icon.","caption":"","url":"https://dds.dell.com/site/production/8d/25/Action_Menu_Chevron_cce33e1300.png"}]' data-numberofcolumns='1'></details>

## 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](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships), [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)

**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](https://www.w3.org/WAI/WCAG21/Understanding/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

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/story/components-action-menu--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?id=components-action-menu--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-action-menu--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-action-menu--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-action-menu--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-action-menu--docs&viewMode=docs&websiteFrame=true'></details>

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

Action Menu

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
