Dropdown menu

Component preview

A compact list of actions that opens from a button and supports menu-style keyboard navigation.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: action menu, overflow menu, kebab menu

a list of actions under the three dots
click this button to show edit and delete
a compact menu for row actions
the little menu that opens below a button
more options in a floating list
keyboard menu for rename duplicate and archive

Try it

Small contextual surfaces

Compare all three behaviors

Shared comparison scenario: A project workspace must reveal brief help, supporting details, or a short action list from a compact control without leaving the current task.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Open the menu, reach Duplicate with arrow keys, activate it, and verify focus returns to the row action button.

Edge case to verify

The unavailable Archive action is skipped during keyboard navigation and exposes its disabled state.

Parts of the specimen

Use it when

Grouping secondary actions for one item
Providing an overflow menu in a compact toolbar

Avoid it when

The user is selecting a value for a form field
The content contains explanatory paragraphs or a form

Compare similar concepts

Choose Tooltip only when the content is brief and contains no interactive element; use Popover for controls or richer content.

Tooltip

Unlike Tooltip, a Popover can contain interactive content; unlike Dropdown menu, it is not limited to a list of actions.

Popover

Technical details

Behaviors

Toggle on activation
Activating the trigger opens the surface, and activating it again can close it.
Navigate actions
Arrow keys move through available actions while Enter or Space activates one.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Menu closed
Menu closed
Menu open
Menu open

State transitions

Menu closed → Menu open
The trigger is activated with pointer, touch, Enter, Space, or Arrow Down.
Menu open → Menu closed
A command is chosen, or Escape or an allowed outside interaction dismisses the menu.

Test scenarios

Context: Each project row has a three-dot button for Rename, Duplicate, and Archive actions.
Mission: Open the menu, reach Duplicate with arrow keys, activate it, and verify focus returns to the row action button.
Primary state: A vertical action list opens under the button with the first enabled item active.
Edge case: The unavailable Archive action is skipped during keyboard navigation and exposes its disabled state.

Accessibility

Role: menu with menuitem children
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Opening places menu focus on an enabled item; closing restores focus to the trigger.
Dismissal: Selecting an action, pressing Escape, or safely pressing outside closes the menu.
Scroll: Page scrolling stays available. The floating surface remains anchored to its trigger or closes when that trigger leaves the viewport.
Announcement: The trigger exposes that it opens a menu, and item names, disabled states, and checked states are announced.
Keyboard: Enter, Space, or Arrow Down opens the menu
Arrow keys move between items
Enter activates the active item
Escape closes the menu

Bindings

DropdownMenu.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
dropdown menu
radixPrimitive
Dropdown Menu
shadcnRecipe
Dropdown Menu
runtimeDependency
@radix-ui/react-dropdown-menu@2.1.20
packageName
@radix-ui/react-dropdown-menu
exportName
DropdownMenu.Root
exactVersion
2.1.20
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix Dropdown Menu models actions, not a form value picker; it must not substitute for Select or Listbox.
Verify binding source

Sources

WAI-ARIA APG: Menu and Menubar Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Dropdown menu: menu and menuitem semantics plus the expected directional keyboard interaction.
Radix Primitives: Dropdown Menu
Radix Primitives · documentation · 2026-07-16
Claim covered: Dropdown menu: documented Radix Dropdown Menu parts, action semantics, focus management, and keyboard behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.