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 { TrashIcon, EditIcon, MoreHorizontalIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuItem, MenuSeparator, MenuTrigger } from "@/components/ui/component";
export default function MenuOpenADialogDemo() {
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogAction, setDialogAction] = useState("");
return (
<div className="flex min-h-screen w-full items-center justify-center bg-black p-8">
{dialogOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setDialogOpen(false)}>
<div className="bg-popover border rounded-lg p-6 w-80 shadow-xl" onClick={(e) => e.stopPropagation()}>
<h2 className="font-semibold text-foreground mb-2">{dialogAction === "delete" ? "Delete item?" : "Rename item"}</h2>
<p className="text-sm text-muted-foreground mb-4">
{dialogAction === "delete" ? "This action cannot be undone." : "Enter a new name for this item."}
</p>
{dialogAction === "rename" && (
<input className="w-full border rounded-md px-3 py-2 text-sm bg-background text-foreground mb-4 outline-none focus:ring-2 focus:ring-ring" defaultValue="My Item" />
)}
<div className="flex gap-2 justify-end">
<Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
<Button variant={dialogAction === "delete" ? "default" : "default"} onClick={() => setDialogOpen(false)}>
{dialogAction === "delete" ? "Delete" : "Save"}
</Button>
</div>
</div>
</div>
)}
<Menu>
<MenuTrigger render={<Button size="icon" variant="outline"><MoreHorizontalIcon /></Button>} />
<MenuPopup>
<MenuItem onSelect={() => { setDialogAction("rename"); setDialogOpen(true); }}>
<EditIcon />Rename
</MenuItem>
<MenuSeparator />
<MenuItem variant="destructive" onSelect={() => { setDialogAction("delete"); setDialogOpen(true); }}>
<TrashIcon />Delete
</MenuItem>
</MenuPopup>
</Menu>
</div>
);
}