Navigation & structure

Dropdown Menu

Q: How do people describe a Dropdown Menu in plain words?

the menu that drops down when I click the three dots a list of actions that appears under a button that little menu for Edit / Duplicate / Delete

Q: How do I implement a Dropdown Menu?

Add a ⋯ dropdown menu on the row: Edit, Duplicate, separator, Delete (destructive). Open on click, close on Esc/outside click, move focus with arrow keys, and restore focus to the trigger on close.

A compact menu of actions or options revealed from a trigger control.

Also known as menu · overflow menu · kebab menu · context actions

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Dropdown Menu".

Add a ⋯ dropdown menu on the row: Edit, Duplicate, separator, Delete (destructive). Open on click, close on Esc/outside click, move focus with arrow keys, and restore focus to the trigger on close.

Anatomy:
- trigger: Button or icon that opens the menu.
- menu: List of items; support separators and destructive styling.
- menu item: One action or choice; optional shortcut label.

Preferred API / pattern: `shadcn DropdownMenu (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Using a dropdown where a select field is needed
○Avoid: Menu opens off-screen
○Avoid: Delete not distinguished

In plain wordsHow people search for it

“the menu that drops down when I click the three dots”“a list of actions that appears under a button”“that little menu for Edit / Duplicate / Delete”

AnatomyOpen for part names

trigger: Button or icon that opens the menu.
menu: List of items; support separators and destructive styling.
menu item: One action or choice; optional shortcut label.

How to write itOpen for stack patterns

Web (HTML/CSS)button + menu role / popover API

React + Tailwind + shadcn/uishadcn DropdownMenu (Radix)

SwiftUIMenu { } label: { }

Ant Design<Dropdown menu>

Notes

Dropdown menus hold actions, not primary navigation for an entire product. Destructive items go last and are visually marked. Don't confuse with Select (picking a value for a form field). Close on outside click and Esc; return focus to the trigger.

Common mistakesHumans and models trip here

Using a dropdown where a select field is needed: wrong pattern for form values.
Menu opens off-screen: collision-aware positioning.
Delete not distinguished: style destructive items and confirm when needed.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.Tooltip / PopoverA small floating tip (tooltip) or richer bubble (popover) anchored to a control.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X