Menus display a list of choices on a temporary surface. They appear when users interact with a button, icon, or control and dismiss when an item is selected or the user clicks away.
Overview
Menus use a white card surface with subtle elevation. Hover and active states use the purple accent: rgba(166,20,195,0.08) background with #A614C3 text.
Basic menu
With active selection
Variants
Menus can include leading icons, trailing keyboard shortcuts, section labels, and nested items.
Icons & shortcuts
Section labels
Export
Share
States
Menu items have four states: default, hover, active/selected, and disabled. The purple hover state uses a low-opacity fill to maintain visual clarity.
Default item
default
Hovered item
hover
Selected item
active
Disabled item
disabled
Specs
| Property | Value | Token |
|---|---|---|
| Min width | 160px | menu.min-width |
| Max width | 280px | menu.max-width |
| Border radius | 12px | menu.radius |
| Item padding | 10px 16px | menu.item.padding |
| Item height | 40px | menu.item.height |
| Item border radius | 6px | menu.item.radius |
| Hover background | rgba(166,20,195,0.08) | menu.item.hover-bg |
| Active text | #A614C3 | menu.item.active-color |
| Divider | 1px, var(--gray-100) | menu.divider |
| Elevation | 0 4px 24px rgba(0,0,0,0.12) | elevation.2 |
| Icon size | 18px | menu.icon.size |
| Font size | 13.5px | menu.item.font-size |