Figma dropdown menus and context menus: patterns, states, and handoff

Quick answer

Menus in Figma are a published Menu / Item component set plus a panel frame (vertical auto layout) that stacks items with consistent height, padding, and dividers. Variants cover state=default | hover | focus | disabled | destructive and optional leading icon and trailing shortcut slots. Document placement (below trigger, flip on overflow), max height + scroll, and keyboard behavior (arrow keys, typeahead) in Dev Mode—not only a static open screenshot. Pair with forms and selects, navigation overflow, and modals for destructive confirms. More on Figma guides.

---

Who this is for

• Product designers shipping action menus, profile dropdowns, and filter pickers.
• Design system contributors defining one menu primitive for web and desktop apps.
• Engineers implementing Radix, MUI, or native menus who need focus and placement rules.

---

Menu types: pick the right pattern

Pattern	Trigger	Best for	Not for
Dropdown / action menu	Button, icon button	Row actions, “More” overflow	50+ options without search
Select / listbox	Select field	Single choice from 5–20 items	Free-text entry (use combobox)
Context menu	Right-click target	Canvas, table row, file list	Primary navigation
Combobox	Text input + chevron	Searchable long lists	Binary toggles
Submenu	Item with chevron	Nested settings	More than 2 levels deep

Verdict: if users pick one value for a form field, use select anatomy from the forms guide. If they run an action, use action menu anatomy below.

---

Menu item anatomy

Layer	Role	Spec tip
Container	Hit area	Min height 32–40px (40px for touch-heavy)
Leading icon	Visual cue	16–20px, optional instance swap
Label	Action name	Left aligned, truncate with ellipsis
Trailing shortcut	Keyboard hint	⌘K, Ctrl+C—use muted text style
Checkmark	Selected in multi/single select	Right aligned
Divider	Group separation	Full width stroke border/subtle

Component set: Menu / Item with variants type=default | destructive | checkbox | submenu and state=default | hover | focus | disabled.

---

Panel container

Menu / Panel
├── Auto layout: vertical, gap 0
├── Padding: 4–8px vertical
├── Min width: 180–220px (match trigger or hug content)
├── Max height: 320–400px (document scroll)
├── Corner radius: radius/md
├── Fill: surface/overlay
├── Shadow: elevation/popover
└── Children: Menu / Item instances + Divider components

Use elevation tokens for popover shadow; dark mode needs a brighter border if shadow is subtle.

---

Trigger + open state frames

Design three frames minimum for handoff:

Frame	Shows
Closed	Trigger default
Open	Panel positioned below trigger
Open (flipped)	Panel above trigger when near viewport bottom

Add a connector note or description: placement: bottom-start; flip: true; offset: 4px.

For icon triggers (kebab ⋮), use a 44×44px hit area per accessibility plugins guidance.

---

States and interaction

State	Visual	Prototype
Default	Transparent or subtle fill	—
Hover	surface/hover fill	On click → action or submenu
Focus	Visible focus ring	Document for keyboard users
Disabled	Reduced opacity, no pointer	Gray out label, not just icon
Destructive	Semantic danger text	Confirm in modal if irreversible

Prototype open/close with overlay click or After delay close; link interactive components for item hover inside the open panel.

Do not rely on prototype alone for focus trap behavior—write it in the description.

---

Grouping and hierarchy

Technique	When
Divider between groups	5+ items with logical sections
Section label (non-interactive)	Settings areas—use text/label style, no hover
Checkbox items	Multi-select filters
Submenu chevron	3–8 child items

Keep primary actions at the top; destructive actions at the bottom separated by a divider.

---

Select vs action menu (comparison)

Criterion	Select / listbox	Action menu
Purpose	Choose a value	Run a command
Closed state	Shows current value	Shows trigger label/icon only
Selected item	Checkmark on active value	N/A (unless toggle item)
Form integration	Part of form field	Standalone
Empty state	“No options” row	Hide menu or disable trigger

---

Context menus

Right-click menus share the same Menu / Item component but attach to a target region (canvas, card, table row).

Spec	Value
Trigger	contextmenu on target
Position	Cursor coordinates, clamp to viewport
Target highlight	Optional subtle border on source

Cross-link table row actions when row kebab and context menu share items—reuse instances, do not duplicate labels.

---

Long lists and combobox

Problem	Design solution
20+ options	Max height + scroll region inside panel
Search	Combobox: input on trigger + filtered list
Recent items	Top group “Recent” with divider
Create new	Last row + Add… styled as default, not destructive

Document filter behavior (prefix match vs contains) in the handoff page.

---

Z-index and stacking

Layer	Stacking note
Menu panel	Above page content, below modal
Nested submenu	Offset 4px, higher z-index than parent panel
Toast	Usually above menus—note if your stack differs

---

Handoff checklist

Deliverable	Where
Placement + flip	Open frame description
Item height token	Menu item component
Keyboard	Arrow, Enter, Escape, typeahead
Destructive flow	Modal spec if confirm required
Empty / loading	Menu / Panel variants

Use Dev Mode checklist before sign-off.

---

Common mistakes

Mistake	Consequence	Fix
Different item heights per menu	Broken auto layout in code	One Menu / Item in team library
Open menu only, no closed	Engineers guess trigger size	Ship closed + open frames
Destructive without confirm	Data loss	Link modal pattern
12px tall items	Fails touch and a11y	Min 32px, prefer 40px on mobile
Color-only disabled state	WCAG issues	Opacity + no pointer + aria spec

---

FAQ

Dropdown vs popover?

Menus are for actions or choices; popovers often host forms or rich content. If the panel has multiple inputs, it is not a menu—design a popover frame with form fields.

How many items before search?

Rough rule: more than 15 options without grouping → add search or combobox. Fewer with strong groups can scroll.

Mobile action menus?

Use bottom sheet pattern for primary mobile overflow—not a tiny desktop dropdown. Document breakpoint switch in responsive guide.

Submenus in prototype?

Figma prototypes handle submenus poorly; spec with static open frames per submenu level for engineering.

---

Bottom line

Menus succeed when items are standardized, placement is documented, and destructive actions have a confirm path. Publish Menu / Item once, stack panels with auto layout, and pair open/closed frames with keyboard notes in Dev Mode. Next: cards, navigation, and the tutorials hub.