Context Menu

Component 4

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Context Menu to your project and fits it to your theme.

Code

How Context Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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 />;
}