Components
Loading preview...
A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.
npx shadcn@latest add https://21st.dev/r/coss.com/menuimport { CloudIcon, CreditCardIcon, SettingsIcon, UserIcon, LogOutIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuSeparator, MenuItem, MenuShortcut, MenuTrigger } from "@/components/ui/component";
export default function MenuDefaultDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-black p-8">
<Menu>
<MenuTrigger render={<Button variant="outline">Open Menu</Button>} />
<MenuPopup>
<MenuItem><UserIcon />Profile<MenuShortcut>⇧⌘P</MenuShortcut></MenuItem>
<MenuItem><CreditCardIcon />Billing<MenuShortcut>⌘B</MenuShortcut></MenuItem>
<MenuItem><SettingsIcon />Settings<MenuShortcut>⌘S</MenuShortcut></MenuItem>
<MenuItem><CloudIcon />API<MenuShortcut>⌘A</MenuShortcut></MenuItem>
<MenuSeparator />
<MenuItem><LogOutIcon />Log out<MenuShortcut>⇧⌘Q</MenuShortcut></MenuItem>
</MenuPopup>
</Menu>
</div>
);
}