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.
Pick an action — the menu closes after it.
Checkbox items
Space or a click toggles an option and the menu stays open. The check fades in within duration-instant.
Showing: toolbar, sidebar
Radio group
One of a few options. The focus highlight always wins over the checked tint, so the checked entry never looks unfocusable.
Sorted by: Newest first
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.
Hover or press → on Share to open its submenu.
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.
Each entry has a name and a line that describes it.
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.
Recent loads for a moment; Favorites has nothing yet.
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.
Paste is off until something is copied — arrow keys still reach it.
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.