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](/components/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.

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.

Basic dropdown menu

Dropdown menus opening positions

Dropdown menu with icons

Dropdown menu with keyboard shortcuts

Dropdown menu with nested submenus

Dropdown menu with checkboxes

Dropdown menu with radio groups

Advance dropdown menu

User profile dropdown menu

Workspace switcher dropdown menu

Notifications dropdown menu

Actions dropdown menu

Share and export dropdown menu

User profile dropdown menu with theme toggle and status selector

User and create menu

Quick action menu

Notifications dropdown with items

AI model selector with provider icons

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