Dropdown Menu
Radix-backed contextual actions menu with labels, separators, shortcuts and submenus.
A Radix-backed contextual actions menu. DropdownMenu pairs a DropdownMenuTrigger with a portalled, animated DropdownMenuContent holding DropdownMenuItems. Group items with DropdownMenuLabel and DropdownMenuSeparator, hint keyboard shortcuts with DropdownMenuShortcut, and reach for the checkbox/radio/sub-menu parts for richer menus. Full keyboard a11y comes from Radix.
Import
import {
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
DropdownMenuShortcut,
} from "@yuhuanowo/yunui";
Basic
The demo opens the menu with defaultOpen so you can see the content inline:
Dropdown menu
With shortcuts
DropdownMenuShortcut right-aligns a keyboard hint inside an item:
Keyboard shortcuts
Parts
| Part | Role |
|---|---|
DropdownMenu | Root; holds open/onOpenChange or defaultOpen. |
DropdownMenuTrigger | The element that opens the menu (use asChild to wrap a Button). |
DropdownMenuContent | Portalled, animated menu panel. |
DropdownMenuItem | A clickable action (onSelect); inset aligns it with checkable items. |
DropdownMenuCheckboxItem | A toggleable item showing a check when checked. |
DropdownMenuRadioGroup / DropdownMenuRadioItem | A single-choice set of items. |
DropdownMenuLabel | Non-interactive section heading. |
DropdownMenuSeparator | Thin divider between groups. |
DropdownMenuShortcut | Right-aligned keyboard-shortcut hint inside an item. |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent | A nested submenu. |
DropdownMenu re-exports Radix DropdownMenu parts with design-system styling. See the Radix DropdownMenu docs for the complete prop reference.