Context Menu

Component

Free, copy-pasteable Tailwind CSS Context Menu component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Interactive Custom Context Zone

Install via CLI

Run this command to automatically add the component and its dependencies to your project.

npx @abhaysinghr516/business-wish add context-menu

New to the CLI? Run npx @abhaysinghr516/business-wish init first to initialize your project.

Replacing default browser context menus (right-click popups) is essential for Awwwards-worthy applications that mimic native desktop utility (Figma, Notion, Raycast).

Interactive Custom Context Zone

Right click anywhere inside the dashed zone to reveal the blurred modal overlay menu tracking explicitly to your pointer coordinates natively relative to the container.

"use client";

import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Copy, Plus, Trash2, Edit } from "lucide-react";

const InteractiveContextMenu: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [point, setPoint] = useState({ x: 0, y: 0 });
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = () => isOpen && setIsOpen(false);
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, [isOpen]);

  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    if (containerRef.current) {
      const bounds = containerRef.current.getBoundingClientRect();
      setPoint({ x: e.clientX - bounds.left, y: e.clientY - bounds.top });
      setIsOpen(true);
    }
  };

  return (
    <div 
      ref={containerRef}
      onContextMenu={handleContextMenu}
      className="relative w-full overflow-hidden ..."
    >
        ...

Card

Data Table