DropdownMenu
Base UI menu: items with icons, shortcuts, checkbox/radio items, submenus and a destructive variant.
import { DropdownMenu } from "@cynco-labs/ui"; Example
import { CopyIcon, PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@cynco-labs/ui";
export default function DropdownMenuDemo() {
return (
<DropdownMenu defaultOpen modal={false}>
<DropdownMenuTrigger render={<Button variant="secondary" />}>Actions</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-52">
<DropdownMenuGroup>
<DropdownMenuLabel>Invoice</DropdownMenuLabel>
<DropdownMenuItem>
<PencilSimpleIcon size={14} />
Edit details
</DropdownMenuItem>
<DropdownMenuItem shortcut="C">
<CopyIcon size={14} />
Copy invoice no.
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<TrashIcon size={14} />
Delete customer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
} Use
Row actions and overflow menus.
Props
DropdownMenuTrigger (with render), DropdownMenuContent, DropdownMenuItem (variant, shortcut, isLoading), DropdownMenuGroup › DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub.
Notes
A DropdownMenuLabel must sit inside a DropdownMenuGroup. Destructive items go last, after a separator.