Menu

Anatomy

┌─── Menu Container (283 px) ───────────────────┐
│  Group Label                                   │  ← 32 px
├───────────────────────────────────────────────│
│  📋  Menu Item 1                               │  ← 42 px
│  ✅  Menu Item 2 (checked)                     │
│  Menu Item 3 (active state)                    │
├───────────────────────────────────────────────│  ← Divider
│  ⚠️  Danger Action (error color)              │
└───────────────────────────────────────────────┘

1. Container — Width ≈ 283 px, with radius --ds-radius-md and floating shadow
2. Section Label — 32 px tall, identifying functional groups
3. Menu Item — Fixed 42 px tall, 275 px wide
4. Icon — Optional, placed to the left of text
5. Divider — Separates different groups

Usage Guidelines

✅ Do

• Group items by frequency of use or logical relationship
• Place destructive actions (delete, logout, etc.) in the last group using Error color style
• Use dividers to separate functional groups for better readability
• Icons aid recognition — keep icon style consistent within a group (all or none)

❌ Don't

• Keep a single group to ≤ 7 items, total groups ≤ 3 — excessive items make the menu too long
• Don't use menus for complex form operations
• Don't mix icon and non-icon items within the same menu
• Don't nest more than 2 levels of submenus — deep nesting is hard to navigate

Interaction Behavior

Accessibility