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
1import {2 DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,3 DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,4 DropdownMenuShortcut,5} 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. |
DropdownMenuGroup | Wraps related items so assistive tech announces them as one set (pair it with a DropdownMenuLabel). |
DropdownMenuPortal | Renders the panel into document.body. DropdownMenuContent already portals; use this only when composing the panel by hand. |
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.