Dropdown Menu
Displays a menu to the user—such as a set of actions or functions—triggered by a button.
import {Button,DropdownMenu,DropdownMenuContent,DropdownMenuItem,DropdownMenuLabel,DropdownMenuSeparator,DropdownMenuTrigger,} from "@murasakijs/ui";export function DropdownMenuDemo() {return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Open</Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>My Account</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem>Profile</DropdownMenuItem> <DropdownMenuItem>Billing</DropdownMenuItem> <DropdownMenuItem>Settings</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem>Log out</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>);}Usage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@murasakijs/ui";<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>API Reference
Subcomponents
| Component | Description |
|---|---|
DropdownMenu | The root primitive. |
DropdownMenuTrigger | The element that opens the menu. Supports asChild. |
DropdownMenuContent | The menu popup. Accepts sideOffset (default 4). |
DropdownMenuItem | A selectable item. Accepts inset to indent it (align with items that have an icon/indicator). |
DropdownMenuCheckboxItem | An item with a checkbox indicator. Accepts checked. |
DropdownMenuRadioGroup / DropdownMenuRadioItem | A mutually-exclusive group of items with a radio indicator. |
DropdownMenuLabel | A non-interactive heading. Accepts inset. |
DropdownMenuSeparator | A visual divider between items or groups. |
DropdownMenuShortcut | Right-aligned muted text for a keyboard shortcut hint. |
DropdownMenuGroup | Groups related items together. |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent | A nested submenu. |
DropdownMenuPortal | Portals content into document.body. Used internally by DropdownMenuContent. |
All subcomponents wrap Radix UI's DropdownMenu
primitives and forward every other prop.