Dropdown Menu
A menu of actions: icons, shortcuts, checkbox and radio entries, submenus, two-line entries, loading and empty states.
What a menu holds
A menu is a list of actions — as wide as its longest entry, opening with a transition that reverses smoothly when it closes early. To pick a value in a form use Select; for links to pages use the Navbar mega menu.
| Pattern | Purpose | Benefit | Best for |
|---|---|---|---|
| Actions | Entries that do something; the menu closes after one. | Shortcut hints stay out of the entry's name; danger is said in the label, not only in red. | Row and card actions, toolbars |
| Checkbox items | Toggle options on and off. | Space toggles and the menu stays open, so several options change in one go. | View options, filters |
| Radio group | Choose one of a few options. | The choice is visible in the menu and stays open while you compare. | Sort order, density |
| Submenu | A second level of actions beside the first. | Opens after 100 ms on hover without closing on the diagonal way over, instantly with →. | Share, Move to |
| Two-line entries | An action with a line that explains it. | The label names the entry, the line describes it — screen readers read them apart. | Create menus, plan pickers |
| Loading and empty | Entries that arrive late, or none at all. | A status line instead of a dead end; arrow keys never land on it. | Recent files, search results |
| Disabled entries | An action that exists but is not possible now. | Stays focusable (WAI-ARIA APG), so keyboard and screen reader users still find it. | Paste with an empty clipboard |
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuEmpty,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuLoading,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@wunderui/react"Examples
Actions
Icons, keyboard hints and one destructive entry. The hint is hidden from screen readers — the binding goes on the entry as aria-keyshortcuts — and the danger is in the words "Delete project", not only in the red.
Checkbox items
Space or a click toggles an option and the menu stays open. The check fades in within duration-instant.
Radio group
One of a few options. The focus highlight always wins over the checked tint, so the checked entry never looks unfocusable.
Submenu
Opens on hover after 100 ms — Base UI's safe polygon keeps it open on the diagonal way over — or instantly with → and Enter. It sits flush beside its entry, opens a step faster than the main menu and flips its side in right-to-left layouts.
Two-line entries
A description under each label. The label is the entry's name and the line its description, so screen readers announce them separately.
Loading and empty
While entries load the menu is busy and shows a status line; with nothing to show it says so. Neither is an entry, so arrow keys skip them.
Disabled entries
Paste is disabled until you copy something. It stays focusable and is announced as unavailable (WAI-ARIA APG), so the action is never invisible to keyboard and screen reader users.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Dropdown search wrap
A menu with a search field on top that filters the items.
Context menu
The row actions behind a … button: edit, duplicate and delete.
Model dropdown
Pick a model — each option has a short description, plus a settings entry.
Sort menu
Pick one order for a list — radio rows in a menu.
File menu
Rows that open a nested menu for recent files and export formats.
Account menu
A header (avatar + name/role), a group of icon rows, then a destructive item after a separator.
Notifications
Custom row content (avatar, message, timestamp) inside plain DropdownMenuItems, plus a footer action.