<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Menu:</strong> A foundational component designed to support the creation of other components, such as dropdowns, side navigation, and action menus. Menu contains menu items inside of it. </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="/components/menu?tab=Tokens">Tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use menu as the base component to build structured navigation or action lists, such as dropdowns, side navigation, or contextual menus. Use menu items to build these components.</p>
<p>Use the menu when:</p>
<ul>
<li>A flexible container is needed to organize navigation or action items</li>
<li>Building higher-level components that require a consistent list structure</li>
<li>Maintaining uniform spacing, alignment, and behavior across navigation patterns</li>
</ul>
<p>Menus, dropdowns, side navigations, and action menus may seem similar, but they serve different purposes. Choose the component that best fits your layout and interaction needs.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Menu</td>
<td>Use as a foundational component that provides structure and consistent spacing for menu-based components.</td>
</tr>
<tr>
<td><a href="/components/dropdown">Dropdown</a></td>
<td>Use to present a list of actions or options triggered by a button or input, typically in a compact, temporary overlay.</td>
</tr>
<tr>
<td><a href="/components/side-navigation">Side Navigation</a></td>
<td>Use for persistent, hierarchical navigation that helps users move between major sections of an application or product.</td>
</tr>
<tr>
<td><a href="/components/action-menu">Action Menu</a></td>
<td>Use to display contextual actions related to a specific element, usually triggered by user interaction.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Menu, menu item, and menu group each have distinct structures.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/menu?tab=Design#design-layout">layout section</a>.</p>
<h3>Menu</h3>
<p>The menu is a container component responsible for layout and structure.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"1. **Slot:** accepts menu item or menu group components","url":"https://dds.dell.com/site/v3/components/menu/menu-anatomy-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Menu item</h3>
<p>A menu item represents a single actionable option or destination.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"1. **Slot:** container that accepts item content\n2. **Checkbox (optional):** checkbox for multi-select behavior\n3. **Check icon (optional):** visual checkmark for selected state","url":"https://dds.dell.com/site/v3/components/menu/menu-item-anatomy-1.png"},{"alt":"","caption":"1. **Checkbox (optional):** checkbox for multi-select behavior\n2. **Check icon (optional):** visual checkmark for selected state\n3. **Icon (optional):** helps users quickly identify the meaning or category of the item\n4. **Label:** text describing the action or destination\n5. **Active state indicator (optional):** shown when item is active","url":"https://dds.dell.com/site/v3/components/menu/menu-item-anatomy-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Menu group</h3>
<details data-name='image-block' data-images='[{"alt":"","caption":"1. **Slot:** contains menu items\n2. **Group header:** label describing the group\n3. **Chevron (optional):** optional chevron for expand/collapse\n4. **Icon (optional):** helps users quickly identify the meaning or category of the item","url":"https://dds.dell.com/site/v3/components/menu/menu-group-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

The menu component is a slot-based container for organizing actions or navigation items. Menu items are placed inside the slot to define content. Items can trigger actions, navigate to destinations, or expand additional content.

As a shared primitive, the same structure can be reused across different patterns while maintaining consistent layout and behavior.

Each pattern builds on this structure. Refer to the corresponding component guidelines for specific behavior and interaction details.

### Basic menu

Use a menu to group related actions or destinations in a simple vertical list.

### Dropdown

Use a menu to display a list of options when triggered by a button or control.

### Side navigation

Use a menu item as persistent navigation to organize sections or pages.

### Action menu

Use a menu to present contextual or secondary actions, such as in overflow or “more” menus.

## Kinds

Menu items support different configurations depending on context.

### Content types

Define how content is presented within the menu item.

* Text only  
* Icon + label  
* Icon only  

Icon only should be used when the side navigation or menu is collapsed. Ensure the icon’s meaning is clear and universally recognizable, as no label will be visible to provide context.

<details data-name='image-block' data-images='[{"alt":"","caption":"Label only","url":"https://dds.dell.com/site/v3/components/menu/text-only.png"},{"alt":"","caption":"\nIcon + label","url":"https://dds.dell.com/site/v3/components/menu/text---icon.png"},{"alt":"","caption":"Icon only","url":"https://dds.dell.com/site/v3/components/menu/icon-only.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

### Selection types

Define how users select or indicate selection.

* Checkbox (multi-select)  
* Checkmark (single selected state)  

<details data-name='image-block' data-images='[{"alt":"","caption":"Checkbox (multi-select)","url":"https://dds.dell.com/site/v3/components/menu/has-checkbox.png"},{"alt":"","caption":"Checkmark (single selected state)","url":"https://dds.dell.com/site/v3/components/menu/has-check.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

Note how to properly use each selection type:

<details data-name='image-block' data-images='[{"alt":"","caption":"Use checkmark for single selected state only.","url":"https://dds.dell.com/site/v3/components/menu/dont-1.png"},{"alt":"","caption":"\nUse checkboxes only for multi-select.","url":"https://dds.dell.com/site/v3/components/menu/dont-2.png"},{"alt":"","caption":"\nUse checkboxes only for multi-select.","url":"https://dds.dell.com/site/v3/components/menu/do.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

### Emphasis

Defines visual importance or intent of the item, such as current state or destructive actions.

* Active  
* Destructive  

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

### Levels

Define hierarchy and nesting within the menu.

* Level 1
* Level 2
* Level 3

Avoid deep nesting and limit to a maximum of two levels.

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

## Sizes

Menu has three size options: **small**, **medium**, and **large**.Sizes adjust spacing and overall density of menu items.

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

## Layout

Menu items follow consistent spacing, alignment, and interaction patterns across all menu types. Each item uses the same core structure and follows system-defined padding, sizing, and states.

The menu supports flexible composition. Slots provide building blocks so designers can incorporate custom elements—such as toggles, indicators, or non-standard text—while maintaining consistent layout and behavior.

### Grouped

A menu group organizes related menu items under a shared header and can be expanded or collapsed.

The group header should clearly describe the content inside. Use groups only when they add clarity and avoid unnecessary separation.

**Collapsed state**

* Items are hidden
* The chevron points down to indicate the group can be expanded

**Expanded state**

* Items are visible
* The chevron points up to indicate the group can be collapsed

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

#### Weight

Menu groups support two weight options: **regular** and **semi bold**. Weight controls the visual prominence of the group header, helping differentiate sections within the menu.

Use regular weight for standard grouping and semi bold weight to give more emphasis to important or primary groups.

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

### 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":"","caption":"Illustration of possible menu combinations using slots.","url":"https://dds.dell.com/site/v3/components/menu/menu-slots--1-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Menu items are impacted by user interaction and will visually reflect their status. They can communicate five states: rest, hover, focus, pressed, and inactive. The states of the component are reflected in its color and opacity.

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

| State    | Behavior                                                                                                                                                                                           |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The rest state is the starting or ending state, indicating the item is in its default state.                                                                                                       |
| Hover    | When a user hovers their cursor over the interactive area of the menu item, the item changes color, indicating that it is able to be pressed.                                                      |
| Focus    | A blue outline appears around the menu item when a user tabs or uses keyboard controls to navigate selections.                                                                                     |
| Pressed  | When a user presses the menu item, it changes color, indicating the menu item is being pressed.                                                                                                    |
| Inactive | Inactive menus are displayed with 40% opacity, indicating the component exists but is not available to the user interaction. If this state is enabled, the menu item cannot be marked as required. |

## Standards

### Accessibility

**A menu item’s meaning should not be communicated by color alone**\
Use clear text labels and, when helpful, icons to communicate the purpose of a menu item. This ensures users who cannot perceive color differences or who rely on assistive technologies can still understand each option. If color is used to indicate states (such as destructive or selected), provide an additional visual or textual cue.\
WCAG 2.2: [1.4.1 Use of Color  ](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

**Ensure menu items meet contrast requirements across all states**\
Text and icons within menu items must maintain a minimum contrast ratio of 4.5:1 against their background. Interactive states—including hover, focus, and selected—must also preserve readability. Visual indicators such as focus outlines must meet a 3:1 contrast ratio against adjacent colors.\
WCAG 2.2: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html), [1.4.11 Non-text Contrast  ](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

**Support full keyboard navigation within menus**\
Users must be able to navigate between menu items using the keyboard, typically with arrow keys, and activate items using Enter or Space. Interaction patterns must be predictable and consistent across all menus.\
WCAG 2.2: [2.1.1 Keyboard  ](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

**Provide proper semantics and state information for assistive technologies**\
Menu items must expose their role and state programmatically (e.g., selected or disabled) so assistive technologies can accurately convey available actions.\
WCAG 2.2: [4.1.2 Name, Role, Value  ](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value)

## Content

**Capitalization**

Use sentence case for menu item labels. Use title case only when required for proper nouns. Avoid all caps.  

* Do: Open file  
* Don’t: OPEN FILE  

<br/>

**Action-oriented labels**

Use clear verbs that describe what happens when the item is selected. Prefer present tense and imperative form.  

* Do: Save, Delete, Share  
* Don’t: Perform save action, Click to delete  

<br/>

**Short and scannable labels**

Keep menu item text concise and easy to scan.  

* Do: Edit, View, Rename  
* Don’t: Edit this item, View more information  

<br/>

**Consistent terminology**

Use the same label for the same action across the experience.  

* Do: Delete (used everywhere)  
* Don’t: Delete, Remove, Discard (for the same action)  

<br/>

**Punctuation**

Avoid punctuation unless necessary.  

* Do: Rename

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

### Menu

| Name                             | Collection | CSS var                                       | Preview  |
| -------------------------------- | ---------- | --------------------------------------------- | -------- |
| menu/padding                     | \-         | `var(--dds-menu-padding)`                     | —        |
| border/radius/xs                 | \-         | `var(--dds-border-radius-xs)`                 | —        |
| color/background/SURFACE/neutral | \-         | `var(--dds-color-background-surface-neutral)` | \#FFFFFF |
| menu/gap                         | \-         | `var(--dds-menu-gap)`                         | —        |

### Menu item

| Name                                    | Collection | CSS var                                            | Preview    |
| --------------------------------------- | ---------- | -------------------------------------------------- | ---------- |
| menu/item/gap                           | \-         | `var(--dds-menu-item-gap)`                        | —          |
| 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/background/SURFACE/transparent    | \-         | `var(--dds-color-background-surface-transparent)` | \#FFFFFF00 |
| menu/item/line-size/sm                  | \-         | `var(--dds-menu-item-line-size-sm)`               | —          |
| spacing/sm                              | \-         | `var(--dds-spacing-sm)`                           | —          |
| checkbox/size/sm                        | \-         | `var(--dds-checkbox-size-sm)`                     | —          |
| border/radius/xs                        | \-         | `var(--dds-border-radius-xs)`                     | —          |
| color/background/SURFACE/neutral        | \-         | `var(--dds-color-background-surface-neutral)`     | \#FFFFFF   |
| color/border/NEUTRAL/base               | \-         | `var(--dds-color-border-neutral-base)`            | \#1D2C3B   |
| icon/size/xs                            | \-         | `var(--dds-icon-size-xs)`                         | —          |
| color/text/NEUTRAL/rest                 | \-         | `var(--dds-color-text-neutral-rest)`              | \#1D2C3B   |
| icon/size/sm                            | \-         | `var(--dds-icon-size-sm)`                         | —          |
| menu/item/indent-l2                     | \-         | `var(--dds-menu-item-indent-l2)`                  | —          |
| menu/item/indent-l3                     | \-         | `var(--dds-menu-item-indent-l3)`                  | —          |
| color/background/ERROR/subtle-rest      | \-         | `var(--dds-color-background-error-subtle-rest)`   | \#FFECEE   |
| color/text/ERROR/rest                   | \-         | `var(--dds-color-text-error-rest)`                | \#BB2A33   |
| menu/item/active/border/width           | \-         | `var(--dds-menu-item-active-border-width)`        | —          |
| color/background/NEUTRAL/subtle-rest    | \-         | `var(--dds-color-background-neutral-subtle-rest)` | \#EBF1F6   |
| menu/item/active/border/color           | \-         | `var(--dds-menu-item-active-border-color)`        | \#1282D6   |
| color/background/SURFACE/inactive       | \-         | `var(--dds-color-background-surface-inactive)`    | \#E1E1E1   |
| color/border/INACTIVE/base              | \-         | `var(--dds-color-border-inactive-base)`           | \#7E7E7E   |
| color/text/inactive                     | \-         | `var(--dds-color-text-inactive)`                  | \#B6B6B6   |
| color/background/NEUTRAL/subtle-hover   | \-         | `var(--dds-color-background-neutral-subtle-hover)`| \#C5D4E3   |
| color/text/NEUTRAL/hover                | \-         | `var(--dds-color-text-neutral-hover)`             | \#141D28   |
| color/background/ERROR/subtle-hover     | \-         | `var(--dds-color-background-error-subtle-hover)`  | \#FFC3C9   |
| color/text/ERROR/hover                  | \-         | `var(--dds-color-text-error-hover)`               | \#8C161F   |
| color/background/NEUTRAL/subtle-pressed | \-         | `var(--dds-color-background-neutral-subtle-pressed)` | \#A4B8CD |
| color/text/NEUTRAL/pressed              | \-         | `var(--dds-color-text-neutral-pressed)`           | \#0A0E14   |
| color/background/ERROR/subtle-pressed   | \-         | `var(--dds-color-background-error-subtle-pressed)`| \#FF99A1   |
| color/text/ERROR/pressed                | \-         | `var(--dds-color-text-error-pressed)`             | \#590A0F   |
| menu/item/padding/md                    | \-         | `var(--dds-menu-item-padding-md)`                 | —          |
| menu/item/line-size/md                  | \-         | `var(--dds-menu-item-line-size-md)`               | —          |
| menu/item/padding/lg                    | \-         | `var(--dds-menu-item-padding-lg)`                 | —          |
| menu/item/line-size/lg                  | \-         | `var(--dds-menu-item-line-size-lg)`               | —          |

``

### Menu group
| Name                                  | Collection | CSS var                                          | Preview  |
| ------------------------------------- | ---------- | ------------------------------------------------ | -------- |
| spacing/xs                            | \-         | `var(--dds-spacing-xs)`                          | —        |
| menu/item/gap                         | \-         | `var(--dds-menu-item-gap)`                       | —        |
| menu/item/padding/lg                  | \-         | `var(--dds-menu-item-padding-lg)`                | —        |
| border/radius/sm                      | \-         | `var(--dds-border-radius-sm)`                    | —        |
| border/width/lg                       | \-         | `var(--dds-border-width-lg)`                     | —        |
| color/background/NEUTRAL/subtle-hover | \-         | `var(--dds-color-background-neutral-subtle-hover)` | \#C5D4E3 |
| menu/item/line-size/lg                | \-         | `var(--dds-menu-item-line-size-lg)`              | —        |
| icon/size/sm                          | \-         | `var(--dds-icon-size-sm)`                        | —        |
| color/text/NEUTRAL/hover              | \-         | `var(--dds-color-text-neutral-hover)`            | \#141D28 |
| menu/gap                              | \-         | `var(--dds-menu-gap)`                            | —        |
| size/4                                | \-         | `var(--dds-size-4)`                              | —        |
| size/16                               | \-         | `var(--dds-size-16)`                             | —        |
| border/radius/xs                      | \-         | `var(--dds-border-radius-xs)`                    | —        |
| color/background/SURFACE/transparent  | -          | `var(--dds-color-background-surface-transparent)`| #FFFFFF00 |
| color/text/NEUTRAL/rest               | -          | `var(--dds-color-text-neutral-rest)`             | #1D2C3B |
| spacing/sm                            | -          | `var(--dds-spacing-sm)`                          | — |
| checkbox/size/sm                      | -          | `var(--dds-checkbox-size-sm)`                    | — |
| color/background/SURFACE/neutral      | -          | `var(--dds-color-background-surface-neutral)`    | #FFFFFF |



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


A foundational component that provides structure and consistent spacing for menu-based components.