Component · Overlay · 32
Dropdown
Dropdown = a menu anchored to its trigger, navigable by keyboard, closing on selection or Escape.
What is a Dropdown?
A dropdown opens a list of actions. Name the anchor, the keyboard path, and what closes it.
Variants
Tap a property to highlight it in the preview.
- The floating list of options shown after the trigger is activated.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- The control that opens the menu.
- Give a value, not a vibe word.
- Small glyphs that label or decorate nav entries.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- The expanded state of a menu, dropdown, or dialog while it is visible.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Trigger
- 02 Menu
- 03 Item
- 04 Separator
- 05 Shortcut hint
When to use
- Row and card overflow menus
- Account menus in a top bar
- Sort and view switches above a list
Avoid when
- The user is picking a value for a form — use Select
- The menu needs more than one level — use Drawer or a page
- There are only two options — use two buttons
Keep it one level deep — a flyout opening a second flyout is where dropdowns start losing the pointer.
Create a dropdown component.
STYLE
- trigger 36px with a 14px trailing chevron, menu 200px wide
- menu surface #FFFFFF, 12px radius, 1px #E5E5EA border, 8px shadow
- items 32px tall, 13px text, hover #F5F5F7, chevron rotates on open
- separators 1px #E5E5EA with 4px padding on both sides
STATES
- closed, open, item hover, selected with a check mark, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui