Shadcn Dropdown Menu

Browse 18 production-ready shadcn dropdown menu components for action buttons, checkbox toggles, radio selection, and keyboard shortcuts. Shadcn Dropdown Menu is compatible with Radix UI and Base UI interaction models and is fully aligned with Shadcn Create style options so your previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Action and overflow menus on a button or a dots icon, such as edit, duplicate, share, export and delete
Account, workspace and create menus showing the signed in user, workspace switching and sign out
Toggles, exclusive choices and short lists, such as panel layout, theme, AI models or recent alerts

When not to use

Actions opened by right clicking or long pressing a surface, with no button to press: use the Context Menu component
A whole top bar with search, alerts, switchers and the user dropdown already placed: use the Navbar blocks
The account settings page an avatar link opens, with identity, team and billing forms: use the Profile blocks

Agent notes

DropdownMenuLabel throws on the base twin unless it sits inside a DropdownMenuGroup or DropdownMenuRadioGroup
On the base twin run an item's action from onClick; onSelect is a Radix item event that Base UI never fires
Pass the trigger element through render on the base twin and as the asChild child on radix; the prop meant for the other twin does nothing

Markdownhttps://web.dev.reui.io/components/dropdown-menu.md

MCPget_component("dropdown-menu")

Installnpx shadcn@latest add dropdown-menu

Full index for agents:llms.txtReUI MCP setup

Shadcn Dropdown Menu: Popover Actions and Selection

Shadcn Dropdown Menu is a popover menu triggered by a button, built on Radix UI primitives that stays compatible with Base UI components for focus, keyboard behavior, and disclosure, while using Tailwind-friendly styles. It is fully compatible with Shadcn Create style options, so radius, fonts, and theme tokens from the create flow apply consistently to previews and exported UI.

It displays a list of actions, checkboxes, or radio options that appear when a trigger button is clicked.

ReUI lists dropdown-menu components inside realistic layouts so you can judge trigger positioning, menu width, and integration with Shadcn Button groups next to other chrome, not only a minimal story. The sections below explain what the component is, why teams adopt it, which features matter, and how it pairs with actions.

What is Shadcn Dropdown Menu?

In UI terms, a dropdown menu is a popover menu triggered by clicking a button, showing a list of actions, toggles, or selections. Shadcn Dropdown Menu follows the same accessibility expectations as Radix UI primitives and fits teams that also use Base UI-style unstyled building blocks.

Components here show simple action menus, checkbox items for toggles, radio groups for exclusive choices, and nested submenus. They are meant to answer whether your product needs a button with quick actions, a settings menu, or a view-mode selector, with styling that respects Shadcn Create options end to end.

Why Use Shadcn Dropdown Menu?

Dropdown menus surface secondary actions without cluttering the primary UI. Teams use them for user settings, view options, bulk actions, and export choices. They are faster to open than dialogs and keep users in context.

Pair dropdown menus with a Shadcn Button and customize the button icon or label. Use DropdownMenuCheckboxItem for toggles like mute, pin, or archive. Use DropdownMenuRadioGroup for exclusive choices like sort order or view. Combine with keyboard shortcuts displayed via DropdownMenuShortcut to help users learn hotkeys.

Shadcn Dropdown Menu Features

Trigger Button. Use any button as a trigger; the menu appears below or above depending on viewport space and align props.
Checkbox Items. Use DropdownMenuCheckboxItem to toggle boolean states like mute, pin, or archived without leaving the menu.
Radio Groups. Use DropdownMenuRadioGroup with DropdownMenuRadioItem for exclusive choices like sort order or view mode.
Keyboard Shortcuts. Display keyboard hints with DropdownMenuShortcut so users learn to invoke actions directly without menu interaction.
Nested Submenus. Use DropdownMenuSub to nest related actions, reducing menu length and organizing command trees hierarchically.

Use dropdown menus with Shadcn Button to create quick-action buttons. Common components include More Actions (three dots), View Options, or Settings menus.

Combine DropdownMenuCheckboxItem with Shadcn Badge to show active filters or settings count. When a user toggles items, update the badge to reflect the current selection.

Nest multiple dropdown menus with DropdownMenuSub to organize complex command trees. Each submenu appears on hover, building hierarchical interactions for export, import, or advanced settings.

Frequently Asked Questions

What is the difference between a dropdown menu and a combobox?

A dropdown menu shows a fixed list of actions or settings when clicked. A Shadcn Combobox allows typing to filter options and returns a selected value. Use menus for actions; use comboboxes for selection.

How do I nest actions or submenus in a dropdown menu?

Use DropdownMenuSub with a trigger and content. The nested menu appears on hover or focus, showing related actions grouped together. This is useful for organizing view modes or export options.

Can I use checkbox items to toggle features on and off?

Yes. Use DropdownMenuCheckboxItem and bind checked state to your app state. When users click, toggle the feature and update the item's checked attribute so the menu shows the current state.

How do I show keyboard shortcuts in the menu?

Add DropdownMenuShortcut inside DropdownMenuItem to display the keyboard combo (e.g., Cmd+S). Users see the hint and can learn to use the shortcut next time instead of opening the menu.

Is the dropdown menu keyboard accessible?

Yes. Arrow keys navigate items, Enter or Space activates, and Escape closes. Ensure items have descriptive text so screen readers announce actions. Test with a screen reader to verify navigation works.

How do I position the dropdown menu on the right of the trigger button?

Use the align prop on DropdownMenuContent: align="end" positions the menu right-aligned with the button. Use side="top" or side="bottom" to control vertical position.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.