When to Use
Example: more menu
- Providing contextual actions triggered by a button, icon, or right-click
- Offering navigation options that don't fit in the main nav bar
- Grouping secondary actions (edit, duplicate, delete) behind a "more" trigger
- Not suitable for complex forms or multi-step workflows — use Dialog or a dedicated page
Usage Guidelines
DO
Group items by frequency of use or logical relationship; place destructive actions in the last group using Error color style
Don’t
Don't exceed 7 items per group or 3 groups total — excessive items make the menu too long
DO
Use dividers to separate functional groups; keep icon style consistent within a group (all or none)
Don’t
Don't use menus for complex form operations. Don't nest more than 2 levels of submenus
DO
Keep icon style consistent within a group — use all icons or no icons
Don’t
Don't mix icon and non-icon items within the same menu
Interaction Behavior
| State | Description |
|---|---|
| Default | White background, normal text color |
| Hover | Background highlights to --ds-color-background-tertiary |
| Activated | Background --ds-color-brand-accent1-background, text --ds-color-brand-accent1-default |
| Disabled | Text grays out, pointer-events: none |
| Keyboard navigation | ↑↓ move focus; → expand submenu; ← / Escape close; Enter/Space trigger |
Accessibility
| Requirement | Implementation |
|---|---|
| Menu container | role="menu" |
| Menu items | role="menuitem" |
| Checkbox menu item | role="menuitemcheckbox" + aria-checked |
| Active item | aria-current="true" |
| Disabled item | aria-disabled="true" |
| Submenu | aria-haspopup="menu" + aria-expanded |
| Focus management | Focus moves to first item on open; returns to trigger on close |