<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Smarter item management:</strong> A new item system with pre-configured item types and consistent interaction states.</li>
<li><strong>Open architecture:</strong> Build custom items while keeping the menu’s spacing, hit areas, and structure intact.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>An action menu shows a list of actions related to a specific item. It helps keep the interface clean by revealing options only when needed.</p>
<p>Use an action menu to:</p>
<ul>
<li>Show actions for a specific item or context</li>
<li>Reduce clutter by hiding secondary actions</li>
<li>Group multiple actions in a compact way</li>
</ul>
<p>Action menus and dropdowns may look similar, but they serve different purposes. Choose the component that best fits your user&#39;s task.</p>
<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>Action menu has three main elements. Grouped menu adds three elements to the standard component.</p>
<p>All items use the new item system, allowing designers to swap labels, icons, and item types without affecting spacing, structure, or interaction behavior.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/accordion?tab=Design#design-layout">layout</a> section.</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**: Indicates an action with a negative or irreversible outcome.","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-anatomy.png"},{"alt":"The anatomy of the group menu, labeled 1 through 3.","caption":"The grouped menu adds the following elements to the standard action menu:\n\n1. **Group label:** Describes the category of actions listed beneath it.\n2. **Icon (optional):** Provides a visual hint for the action.\n3. **Check icon (only multi-select):** Shows which options are currently selected.","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-anatomy-group.png"}]' data-numberofcolumns='2' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

An action menu shows actions related to a specific item or context. It appears when the user triggers it, keeping the interface clean while still providing access to important tools.

Use an action menu to present actions like **edit, copy, rename, or view details.** Keep essential or high‑priority actions visible on the page instead of hiding them in the menu.

Place the most common actions at the top and group related items together. Put destructive or experience‑ending actions at the bottom. If an action doesn’t apply in the current state, show it as inactive.

## Kinds

An action menu supports three types of lists. Choose the one that matches the behavior your experience needs.

V3 includes pre‑configured item types (single‑select, multi‑select, destructive, etc.) to reduce manual setup and ensure consistent states and behavior across the system.

### Single-select

Use a single‑select action menu to present a list of individual actions. The user selects one option, the action runs, and the menu closes. Use familiar, universally recognized icons for actions.

Example:

* An item’s action menu includes edit, duplicate, and delete. The user chooses one action.

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

### Multi-select

Use multi‑select when users need to turn options on or off and keep them applied. Selecting an option shows a check icon. Options remain selected until the user toggles them off.

Example:

* A settings menu lets users enable multiple categories, with selected items shown using checkmarks.

<details data-name='image-block' data-images='[{"alt":"An action menu with selectable options in a list.","caption":"","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-kinds-multi-select.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Grouped

Use groups to organize related actions or to separate single‑select actions from multi‑select options. Groups can include headings, separators, or both.

Menu items are grouped by type and separated with dividers or group titles. Destructive actions should always be isolated and placed at the bottom.

Example:

* A file’s action menu groups related tasks under headings. Group A includes “open”, “preview”, and “download”. Group B includes multi‑select options like “show” in sidebar and “pin”. Headings and separators help users scan and understand the hierarchy.

<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/v3/components/badge/badge-color-semantic.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes


Action menu can be applied in medium size.

<details data-name='image-block' data-images='[{"alt":"","caption":"Medium action menu","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-sizes-medium.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Example of the component with building block and slot.","caption":"Example of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Items

Action menus are built from **items** that ensure consistent spacing, alignment, and interaction across all menu types.
Every item (single‑select, multi‑select, or custom) uses the same core structure. All items follow system‑defined padding, sizing, and interaction states.

Each item includes:

* Label
* Optional icon
* Optional check icon (multi‑select only)
* Required spacing and hit area

v3 includes **pre‑configured item types** (single‑select, multi‑select, destructive), so designers don’t need to manually adjust spacing or states.

Some layouts require unique content. Using the item building block, designers can swap in **custom elements,** such as toggles, indicators, or non‑standard text, while keeping the menu’s outer layout consistent.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/action-menu/action-menu-layout-building-block.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Action menu uses the same interaction rules as other components. They include hover, focus, pressed, selected, and disabled states.

The behavior is consistent with [buttons](https://www.delldesignsystem.com/components/button), but visually adapted for list items.

### Triggers

Action menus open from a trigger element. Triggers are usually buttons with a familiar [icon](https://www.delldesignsystem.com/foundations/icons/), such as overflow. Avoid icons that could be mistaken for navigation or global settings.

Note: the trigger is not part of the action menu component, but it is shown here for interaction clarity.

#### With single-select menu

Use a single‑select menu when the items perform individual actions. Once the user selects an item, the action runs and the menu closes immediately.

<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/v3/components/action-menu/action-menu-behaviors-trigger-single-select.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### With multi-select menu

Use a multi‑select menu when users need to keep multiple options active. Selecting an option toggles it on or off and shows a check icon. The menu stays open while users make their selections.

<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/v3/components/action-menu/action-menu-behaviors-trigger-multi-select.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### With grouped menu

Use a grouped menu when combining single‑select and multi‑select actions in the same list, or when organizing related actions under headings. Use a [divider](/components/divider/) or group label to separate groups. Group labels are not interactive.

<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/v3/components/action-menu/action-menu-behaviors-trigger-group.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Overflow

Use an action menu with an overflow trigger to hide extra or less‑frequent actions that don’t need constant visibility.

<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/v3/components/action-menu/action-menu-behaviors-trigger-overflow-2x.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Chevron

Use a chevron‑down trigger to indicate that more actions or options are 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/v3/components/action-menu/action-menu-behaviors-trigger-chevron-2x.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                               | Collection | CSS var                                         | Preview  |
| ---------------------------------- | ---------- | ----------------------------------------------- | -------- |
| menu/padding                       | Component  | `var(--dds-menu-padding)`                       | \-       |
| action-menu/min-width              | Component  | `var(--dds-action-menu-min-width)`              | \-       |
| action-menu/max-width              | Component  | `var(--dds-action-menu-max-width)`              | \-       |
| action-menu/max-height             | Component  | `var(--dds-action-menu-max-height)`             | \-       |
| action-menu/max-height             | Component  | `var(--dds-action-menu-max-height)`             | \-       |
| color/background/SURFACE/neutral   | Semantic   | `var(--dds-color-background-surface-neutral)`   | \-       |
| menu/gap                           | Component  | `var(--dds-color-background-surface-neutral)`   | \-       |
| menu/gap                           | Component  | `var(--dds-menu-gap)`                           | \-       |
| size/4                             | Global     | `var(--dds-size-4)`                             | \-       |
| size/16                            | Global     | `var(--dds-size-16)`                            | \-       |
| border/radius/xs                   | Semantic   | `var(--dds-border-radius-xs)`                   | \-       |
| border/width/xs                    | Semantic   | `var(--dds-border-width-xs)`                    | \-       |
| color/purple/80                    | Global     | `var(--dds-color-purple-80)`                    | \#66278F |
| color/background/SURFACE/secondary | Semantic   | `var(--dds-color-background-surface-secondary)` | \-       |
| border/radius/rounded              | Semantic   | `var(--dds-border-radius-rounded)`              | \-       |
| menu/item/gap                      | Component  | `var(--dds-menu-item-gap)`                      | \-       |
| menu/item/padding/sm               | Component  | `var(--dds-menu-item-padding-sm)`               | \-       |
| border/radius/sm                   | Semantic   | `var(--dds-border-radius-sm)`                   | \-       |
| menu/item/line-size/sm             | Component  | `var(--dds-menu-item-line-size-sm)`             | \-       |
| checkbox/size/sm                   | Component  | `var(--dds-checkbox-size-sm)`                   | \-       |
| color/border/NEUTRAL/base          | Semantic   | `var(--dds-color-border-neutral-base)`          | \#1D2C3B |
| icon/size/xs                       | Component  | `var(--dds-icon-size-xs)`                       | \-       |
| color/text/NEUTRAL/rest            | Semantic   | `var(--dds-color-text-neutral-rest)`            | \#1D2C3B |
| icon/size/sm                       | Component  | `var(--dds-icon-size-sm)`                       | \-       |
| menu/item/padding/sm               | \-         | `var(--dds-menu-item-padding-sm)`               | \-       |
| border/radius/sm                   | \-         | `var(--dds-border-radius-sm)`                   | \-       |
| border/width/lg                    | \-         | `var(--dds-border-width-lg)`                    | \-       |
| color/text/NEUTRAL/hover           | Semantic   | `var(--dds-color-text-neutral-hover)`           | \#141D28 |
| menu/item/line-size/sm             | \-         | `var(--dds-menu-item-line-size-sm)`             | \-       |
| menu/item/line-size/lg             | \-         | `var(--dds-menu-item-line-size-lg)`             | \-       |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-action-menu--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-action-menu--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-action-menu--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-action-menu--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-action-menu--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-action-menu--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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

Action Menu