Menus

arrow_back arrow_forward

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 at 12px radius with a #E5E7EB hairline and a 180px minimum width. Hover is neutral — #F9FAFB (rgba(255,255,255,0.04) in dark), not a brand tint. Only the active row and destructive items carry colour.

Basic menu

With active selection

Variants

Menus can include leading icons, trailing keyboard shortcuts, section labels, and nested items.

Icons & shortcuts

Section labels

Export

States

Three states, not four. There is no disabled menu item anywhere in the product, and hover is never a purple fill — it is a neutral #F9FAFB tint in all three menus. Selection is marked with a trailing check, not with weight.

Select menu — the common case

rest transparent · #1F2937
hover #F9FAFB · colour unchanged
selected rgba(168,85,247,.08) · #A614C3 + check

Account menu — icons and a section label

My Account

rest transparent · #2D3653
hover #F9FAFB · colour unchanged
Items keep a 12px radius, unlike the other two.

Context menu — right-click on a row

rest #1F2937 · hover #F9FAFB
Destructive items are #EF4444 in every state.
No separator, no disabled row.

Specs

Three patterns ship. They do not share a radius, a shadow or an item shape — pick the one that matches the trigger.

	Select menu	Account menu	Context menu
Trigger	A select field	The sidebar account button	Right-click on a row
Width	Matches the field	Matches the button	`min-width 160px`
Radius	`8px`	`12px`	`8px`
Border	`1px #E9EAEC`	`1px #E5E7EB`	`1px #E9EAEC`
Shadow	`0 8px 24px rgba(0,0,0,.12)`	`0 12px 32px rgba(0,0,0,.14)`	`0 8px 24px rgba(0,0,0,.12)`
Container padding	None — `overflow:hidden`	`4px`	`4px 0`
Item padding	`8px 12px`	`8px 12px`	`8px 12px`
Item radius	None (square, clipped)	`12px`	None
Item type	13px / 400	13px / 500	12px / 400
Icon	None	16×16 · `#6B7280` · `gap 10px`	14×14 · `gap 10px`
Hover	`#F9FAFB`	`#F9FAFB`	`#F9FAFB`
Selected	`rgba(168,85,247,.08)` · `#A614C3` · trailing check	—	—
Destructive	—	—	`#EF4444` in every state
Disabled	Does not exist. Actions that are unavailable are removed from the menu, not greyed out.

← Previous Menubar Next → Navigation