Skip to content
SkillCodex
Menu

Dropdown menu

Dropdown menu

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

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: a list of actions under the three dotsclick this button to show edit and deletea compact menu for row actions

All phrasings
Save and share

Recognize

Small contextual surfaces

Try it

Do you need a short explanation, interactive contextual content, or an action list?

Dropdown menu

Shared trial context

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

Dropdown menu

Mission

Dropdown menu

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

Launch card

Final preparation

1 copy

Live result

No action has run. The menu is closed.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
A vertical action list opens under the button with the first enabled item active.
Edge case
The unavailable Archive action exposes its disabled state and cannot be activated.

What this example shows

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

Which fits your need?

Dropdown menu

Grouping secondary actions for one item

Tooltip

Explaining an unfamiliar icon

Which component will you use here?
Difference and sources

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trigger

    The control that opens or reveals the surface.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Small contextual surfaces

      Dropdown menu belongs to this comparison group.

    • Do not confuse

      Tooltip

      Choose Dropdown menu if the user must pick an action such as Edit, Duplicate, or Archive. Choose Tooltip if a short text merely explains an icon or control and nothing can be clicked inside it.

      Compare this pair
    • Do not confuse

      Popover

      Choose Dropdown menu if every item is an action such as Edit or Archive. Choose Popover if the content is explanatory or interactive and not limited to a list of actions.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: action menu, overflow menu, kebab menu, context 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

    Choose

    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

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Focus the menu button, open it with Enter, then move between actions with the arrow keys.

      Expected result

      Focus enters an available menu action and follows the arrow keys without tabbing through every item.

    2. 2. Do this

      Activate a harmless action, then reopen the menu and try an unavailable action.

      Expected result

      The available action runs once; the unavailable action cannot run and its unavailable state is exposed.

    3. 3. Do this

      Reopen the menu, move to another item, then press Escape.

      Expected result

      The menu closes without running that item, and focus returns to the menu button.

    Full contract
    1. 1Every item is an action rather than a form value
    2. 2Arrow-key navigation follows the menu pattern
    3. 3Disabled items expose their state and cannot be activated
    4. 4Closing restores focus to the trigger

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Dropdown menu without breaking its behavior

    # Implement Dropdown menu in your agent
    
    ## Objective
    Implement Dropdown menu for this verified behavior: A compact list of actions that opens from a button and supports menu-style keyboard navigation.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Dropdown menu matches the need before writing code.
    
    ## Required behavior
    - Activating the trigger opens the surface, and activating it again can close it.
    - Arrow keys move through available actions while Enter or Space activates one.
    - Escape closes the temporary surface and returns focus to a sensible control.
    
    ## States to cover
    - Menu closed
    - Menu open
    
    ## Accessibility
    - ARIA role: menu > menuitem
    - The primary control or named region for Dropdown menu has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Opening places menu focus on an enabled item; closing restores focus to the trigger.
    - Selecting an action, pressing Escape, or safely pressing outside closes the menu.
    - The trigger exposes that it opens a menu, and item names, disabled states, and checked states are announced.
    - Enter, Space, or Arrow Down opens the menu
    - Arrow keys move between items
    - Enter or Space activates the active item
    - Escape closes the menu
    
    ## When not to use
    - The user is selecting a value for a form field
    - The content contains explanatory paragraphs or a form
    
    ## Acceptance criteria
    - Every item is an action rather than a form value
    - Arrow-key navigation follows the menu pattern
    - Disabled items expose their state and cannot be activated
    - Closing restores focus to the trigger
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • @radix-ui/react-dropdown-menu
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Dropdown menu on a real journey

    # Verify Dropdown menu after implementation
    
    ## Objective
    Audit the Dropdown menu implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:a4759625ed0017bb741be0656bd0eb5fc09ff02389153f5a0a2bc48f7866db49

    Diagnose a problem

    Find and fix the Dropdown menu defect

    # Debug Dropdown menu in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Dropdown menu.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - Every item is an action rather than a form value
    - Arrow-key navigation follows the menu pattern
    - Disabled items expose their state and cannot be activated
    - Closing restores focus to the trigger
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • @radix-ui/react-dropdown-menu
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Dropdown menu fix

    # Prevent the Dropdown menu regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Dropdown menu with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:50289b06433fb4170b7e6666eda44a055e9df4e919986276d845ef2dcd388f41

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:491d8e65d68cf6ccf8a545a2d4e75633b0205b200a5d0523f4547fca2831d262

    In code

    TechnologyPrimitiveVersionCaveat
    @radix-ui/react-dropdown-menu

    DropdownMenu.Root

    @radix-ui/react-dropdown-menu@2.1.20Dropdown Menu models actions, not a form value picker; it does not replace Select or Listbox.

    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 exposes its disabled state and cannot be activated.

    Visual signals

    • Vertical list near a trigger
    • Items use action labels
    • May include separators or disabled actions

    Behavioral signals

    • Arrow keys move a single active item
    • Selecting an item runs an action and closes the menu
    • Typing may jump by item label

    Accessibility

    Role
    menu > menuitem
    Accessible name
    The primary control or named region for Dropdown menu 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 or Space activates the active item
    • Escape closes the menu

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • DropdownMenu.Root

      implementationKind
      radix
      nativeElement
      Not applicable
      ariaPattern
      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
      sourceId
      source-ui-radix-dropdown-menu
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Dropdown Menu models actions, not a form value picker; it does not replace Select or Listbox.

      Verify binding source

    Sources

    • WAI-ARIA APG: Menu and Menubar Pattern
      sourceId
      source-ui-aria-menu-menubar
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:99463b20454ca421ca96421809f2bedc7a7ba86db3f8c0e1d6b5bdad1880e744
      status
      verified

      Claim covered: Dropdown menu: informative APG guidance for the menu and menubar pattern: roles, states, relationships, and keyboard interaction.

    • Radix Primitives: Dropdown Menu
      sourceId
      source-ui-radix-dropdown-menu
      kind
      documentation
      canonicalUrl
      https://www.radix-ui.com/primitives/docs/components/dropdown-menu
      publisher
      Radix Primitives
      sourceRevision
      http-etag:W/"286f80a30ca24d54991556335861ce8b"
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:438621ebadd2ac4653da60d5020f315f977b741b8c8496cff17b158de0190ba0
      status
      verified

      Claim covered: Dropdown menu: documented parts, state APIs, interaction behavior, and implementation limits for Radix Dropdown Menu.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Dropdown menu: normative ARIA role definitions and constraints for the stated accessible role.

    • WAI-ARIA APG: Button Pattern
      sourceId
      source-ui-aria-button
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/button/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:863329ea659a53439b0953eec0bd0af7c6219e372d0e878f75e57d263924704c
      status
      verified

      Claim covered: Dropdown menu: informative APG guidance for the button pattern: roles, states, relationships, and keyboard interaction.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Dropdown menu: informative WCAG guidance for evaluating visible keyboard focus appearance.