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/menu"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuItem, MenuTrigger } from "@/components/ui/component";
export default function MenuCloseOnClickDemo() {
const [lastAction, setLastAction] = useState<string | null>(null);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-black p-8 flex-col gap-4">
<Menu>
<MenuTrigger render={<Button variant="outline">Actions</Button>} />
<MenuPopup>
<MenuItem onSelect={() => setLastAction("Copy")}>Copy</MenuItem>
<MenuItem onSelect={() => setLastAction("Cut")}>Cut</MenuItem>
<MenuItem onSelect={() => setLastAction("Paste")}>Paste</MenuItem>
<MenuItem onSelect={() => setLastAction("Delete")} variant="destructive">Delete</MenuItem>
</MenuPopup>
</Menu>
{lastAction && (
<p className="text-sm text-muted-foreground">Last action: <span className="text-foreground font-medium">{lastAction}</span></p>
)}
</div>
);
}