"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type ContextMenuItem = {
  label: string;
  shortcut?: string;
  onSelect?: () => void;
  disabled?: boolean;
  destructive?: boolean;
  children?: ContextMenuItem[];
};

const defaultItems: ContextMenuItem[] = [
  {
    label: "Open",
    shortcut: "Enter",
    onSelect: () => undefined,
  },
  {
    label: "Open in new tab",
    shortcut: "Cmd + Enter",
    onSelect: () => undefined,
  },
  {
    label: "Share",
    children: [
      { label: "Copy link", shortcut: "Cmd + C", onSelect: () => undefined },
      { label: "Email", shortcut: "Cmd + E", onSelect: () => undefined },
    ],
  },
  {
    label: "Rename",
    shortcut: "Cmd + R",
    onSelect: () => undefined,
  },
  {
    label: "Delete",
    destructive: true,
    onSelect: () => undefined,
  },
];

export interface ContextMenuProps {
  items?: ContextMenuItem[];
  className?: string;
}

export function ContextMenu({ items = defaultItems, className }: ContextMenuProps) {
  const [isOpen, setIsOpen] = React.useState(false);
  const [position, setPosition] = React.useState({ x: 0, y: 0 });
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [submenuIndex, setSubmenuIndex] = React.useState<number | null>(null);
  const [submenuActiveIndex, setSubmenuActiveIndex] = React.useState(0);
  const [focusLayer, setFocusLayer] = React.useState<"root" | "submenu">(
    "root"
  );
  const menuRef = React.useRef<HTMLDivElement>(null);

  const closeMenu = React.useCallback(() => {
    setIsOpen(false);
    setSubmenuIndex(null);
    setFocusLayer("root");
  }, []);

  const openMenu = React.useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      const menuWidth = 240;
      const menuHeight = 260;
      const x = Math.min(event.clientX, window.innerWidth - menuWidth - 12);
      const y = Math.min(event.clientY, window.innerHeight - menuHeight - 12);
      setPosition({ x: Math.max(12, x), y: Math.max(12, y) });
      setIsOpen(true);
      setActiveIndex(0);
      setSubmenuIndex(null);
      setSubmenuActiveIndex(0);
      setFocusLayer("root");
    },
    []
  );

  const activeItem = items[activeIndex];
  const submenuItems = submenuIndex !== null ? items[submenuIndex]?.children : null;

  React.useEffect(() => {
    if (!isOpen) {
      return;
    }

    const handlePointer = (event: MouseEvent) => {
      if (!menuRef.current?.contains(event.target as Node)) {
        closeMenu();
      }
    };

    const handleKey = (event: KeyboardEvent) => {
      if (!isOpen) {
        return;
      }

      if (event.key === "Escape") {
        event.preventDefault();
        closeMenu();
        return;
      }

      if (event.key === "ArrowDown") {
        event.preventDefault();
        if (focusLayer === "submenu" && submenuItems?.length) {
          setSubmenuActiveIndex((prev) => (prev + 1) % submenuItems.length);
        } else {
          setActiveIndex((prev) => (prev + 1) % items.length);
        }
      }

      if (event.key === "ArrowUp") {
        event.preventDefault();
        if (focusLayer === "submenu" && submenuItems?.length) {
          setSubmenuActiveIndex((prev) =>
            prev === 0 ? submenuItems.length - 1 : prev - 1
          );
        } else {
          setActiveIndex((prev) => (prev === 0 ? items.length - 1 : prev - 1));
        }
      }

      if (event.key === "ArrowRight") {
        if (activeItem?.children?.length) {
          event.preventDefault();
          setSubmenuIndex(activeIndex);
          setSubmenuActiveIndex(0);
          setFocusLayer("submenu");
        }
      }

      if (event.key === "ArrowLeft") {
        if (focusLayer === "submenu") {
          event.preventDefault();
          setFocusLayer("root");
          setSubmenuIndex(null);
        }
      }

      if (event.key === "Enter") {
        event.preventDefault();
        if (focusLayer === "submenu" && submenuItems?.length) {
          const selected = submenuItems[submenuActiveIndex];
          if (!selected?.disabled) {
            selected?.onSelect?.();
            closeMenu();
          }
        } else if (activeItem) {
          if (activeItem.children?.length) {
            setSubmenuIndex(activeIndex);
            setSubmenuActiveIndex(0);
            setFocusLayer("submenu");
          } else if (!activeItem.disabled) {
            activeItem.onSelect?.();
            closeMenu();
          }
        }
      }
    };

    window.addEventListener("mousedown", handlePointer);
    window.addEventListener("scroll", closeMenu, true);
    window.addEventListener("keydown", handleKey);

    return () => {
      window.removeEventListener("mousedown", handlePointer);
      window.removeEventListener("scroll", closeMenu, true);
      window.removeEventListener("keydown", handleKey);
    };
  }, [
    activeIndex,
    activeItem,
    closeMenu,
    focusLayer,
    isOpen,
    items,
    submenuActiveIndex,
    submenuItems,
  ]);

  return (
    <div
      className={cn(
        "relative flex w-full items-center justify-center rounded-2xl border border-border bg-card p-10 text-sm text-muted-foreground",
        className
      )}
      onContextMenu={openMenu}
    >
      <div className="space-y-2 text-center">
        <p className="text-base font-semibold text-foreground">Right click here</p>
        <p className="text-sm text-muted-foreground">
          Keyboard navigation supports arrows, Enter, and Escape.
        </p>
      </div>

      {isOpen ? (
        <div
          ref={menuRef}
          className="fixed z-50 min-w-[220px] rounded-lg border border-border bg-card p-1 text-sm shadow-lg"
          style={{ top: position.y, left: position.x }}
          role="menu"
          aria-label="Context menu"
        >
          <div className="flex flex-col">
            {items.map((item, index) => {
              const isActive = index === activeIndex;
              const isSubmenuOpen = submenuIndex === index;
              return (
                <div key={`${item.label}-${index}`} className="relative">
                  <button
                    type="button"
                    role="menuitem"
                    disabled={item.disabled}
                    onMouseEnter={() => {
                      setActiveIndex(index);
                      if (item.children?.length) {
                        setSubmenuIndex(index);
                      } else {
                        setSubmenuIndex(null);
                      }
                      setFocusLayer("root");
                    }}
                    onClick={() => {
                      if (item.children?.length) {
                        setSubmenuIndex(index);
                        setFocusLayer("submenu");
                      } else if (!item.disabled) {
                        item.onSelect?.();
                        closeMenu();
                      }
                    }}
                    className={cn(
                      "flex w-full items-center justify-between gap-4 rounded-md px-3 py-2 text-left transition focus-visible:outline-none",
                      isActive ? "bg-muted text-foreground" : "text-foreground",
                      item.disabled ? "opacity-50" : "hover:bg-muted",
                      item.destructive ? "text-destructive" : ""
                    )}
                  >
                    <span>{item.label}</span>
                    <span className="flex items-center gap-3 text-xs text-muted-foreground">
                      {item.shortcut ? <span>{item.shortcut}</span> : null}
                      {item.children?.length ? (
                        <svg
                          viewBox="0 0 20 20"
                          className="h-3 w-3"
                          aria-hidden
                        >
                          <path
                            d="M7 5l5 5-5 5"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="1.6"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      ) : null}
                    </span>
                  </button>

                  {item.children?.length && isSubmenuOpen ? (
                    <div
                      className="absolute left-full top-0 ml-2 min-w-[200px] rounded-lg border border-border bg-card p-1 text-sm shadow-lg"
                      role="menu"
                      aria-label={`${item.label} submenu`}
                      onMouseEnter={() => setFocusLayer("submenu")}
                    >
                      {item.children.map((child, childIndex) => {
                        const isChildActive =
                          focusLayer === "submenu" && childIndex === submenuActiveIndex;
                        return (
                          <button
                            key={`${child.label}-${childIndex}`}
                            type="button"
                            role="menuitem"
                            disabled={child.disabled}
                            onMouseEnter={() => {
                              setSubmenuActiveIndex(childIndex);
                              setFocusLayer("submenu");
                            }}
                            onClick={() => {
                              if (!child.disabled) {
                                child.onSelect?.();
                                closeMenu();
                              }
                            }}
                            className={cn(
                              "flex w-full items-center justify-between rounded-md px-3 py-2 text-left transition",
                              isChildActive
                                ? "bg-muted text-foreground"
                                : "text-foreground",
                              child.disabled ? "opacity-50" : "hover:bg-muted"
                            )}
                          >
                            <span>{child.label}</span>
                            {child.shortcut ? (
                              <span className="text-xs text-muted-foreground">
                                {child.shortcut}
                              </span>
                            ) : null}
                          </button>
                        );
                      })}
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}
Context Menu

Dependencies

Files

Installation
