A right-click dropdown menu that opens at the cursor position over any wrapped element, supporting icons, keyboard shortcuts, separators and destructive actions.
import ContextMenu, {
Badge,
Card,
Stack,
Text,
} from "@/components/ui/context-menu";
import { useState } from "react";
export default function HandlingSelectionDemo() {
const [status, setStatus] = useState("Open");
return (
<ContextMenu
items={[
{ label: "Mark as open", onSelect: () => setStatus("Open") },
{ label: "Mark as pending", onSelect: () => setStatus("Pending") },
{ label: "Mark as resolved", onSelect: () => setStatus("Resolved") },
]}
>
<Card style={{ width: 320 }}>
<Stack direction="row" gap={12} align="center" justify="space-between">
<Text weight="medium">#4830 Refund request</Text>
<Badge
variant={
status === "Resolved"
? "success"
: status === "Pending"
? "warning"
: "default"
}
>
{status}
</Badge>
</Stack>
</Card>
</ContextMenu>
);
}
