A right click context menu with grouped sections, nested submenus, keyboard shortcut labels and destructive items. Built on Base UI for file managers, editors and canvases.
"use client";
import * as React from "react";
import { IconClipboard, IconCopy, IconTrash } from "@tabler/icons-react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/context-menu";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const Surface = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
function Surface({ className, children, ...props }, ref) {
return (
<div
ref={ref}
className={cn(
"flex h-28 w-full max-w-[380px] select-none items-center justify-center rounded-lg border border-dashed border-[var(--border)]",
"text-[12.5px] text-[var(--muted-foreground)]",
className,
)}
{...props}
>
{children}
</div>
);
},
);
export function ContextMenuPreview() {
const surfaceRef = React.useRef<HTMLDivElement>(null);
// Open the menu once on mount, at the center of the area, so the preview
// shows it without a manual right-click.
React.useEffect(() => {
const timer = window.setTimeout(() => {
const el = surfaceRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
el.dispatchEvent(
new MouseEvent("contextmenu", {
bubbles: true,
cancelable: true,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2,
}),
);
}, 300);
return () => window.clearTimeout(timer);
}, []);
return (
<ContextMenu>
<ContextMenuTrigger asChild>
<Surface ref={surfaceRef}>Right-click this area</Surface>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>
<IconCopy stroke={1.75} className="size-4 text-[var(--muted-foreground)]" />
Copy
<ContextMenuShortcut>⌘C</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>
<IconClipboard stroke={1.75} className="size-4 text-[var(--muted-foreground)]" />
Paste
<ContextMenuShortcut>⌘V</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem destructive>
<IconTrash stroke={1.75} className="size-4" />
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}
export default function Demo() {
return <ContextMenuPreview />;
}