Example: more menu
Group items by frequency of use or logical relationship; place destructive actions in the last group using Error color style
Don't exceed 7 items per group or 3 groups total — excessive items make the menu too long
Use dividers to separate functional groups; keep icon style consistent within a group (all or none)
Don't use menus for complex form operations. Don't nest more than 2 levels of submenus
Keep icon style consistent within a group — use all icons or no icons
Don't mix icon and non-icon items within the same menu
| 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 |
| 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 |