Context Menu

Component

About

A right-click (or long-press) popup menu for triggering contextual actions on an element, with items, checkboxes, radio groups, shortcuts, and nested submenus.

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 {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuSides() {
  return (
    <div dir="rtl" className="grid w-full max-w-md grid-cols-2 gap-4">
      <ContextMenu>
        <ContextMenuTrigger className="flex min-h-28 w-full items-center justify-center rounded-xl border border-dashed p-4 text-sm">
          <span className="hidden pointer-fine:inline-block">
            راست‌کلیک (بالا)
          </span>
          <span className="hidden pointer-coarse:inline-block">
            لمس طولانی (بالا)
          </span>
        </ContextMenuTrigger>
        <ContextMenuContent side="top">
          <ContextMenuGroup>
            <ContextMenuItem>بازگشت</ContextMenuItem>
            <ContextMenuItem>جلو</ContextMenuItem>
            <ContextMenuItem>بارگذاری مجدد</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger className="flex min-h-28 w-full items-center justify-center rounded-xl border border-dashed p-4 text-sm">
          <span className="hidden pointer-fine:inline-block">
            راست‌کلیک (راست)
          </span>
          <span className="hidden pointer-coarse:inline-block">
            لمس طولانی (راست)
          </span>
        </ContextMenuTrigger>
        <ContextMenuContent side="right">
          <ContextMenuGroup>
            <ContextMenuItem>بازگشت</ContextMenuItem>
            <ContextMenuItem>جلو</ContextMenuItem>
            <ContextMenuItem>بارگذاری مجدد</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger className="flex min-h-28 w-full items-center justify-center rounded-xl border border-dashed p-4 text-sm">
          <span className="hidden pointer-fine:inline-block">
            راست‌کلیک (پایین)
          </span>
          <span className="hidden pointer-coarse:inline-block">
            لمس طولانی (پایین)
          </span>
        </ContextMenuTrigger>
        <ContextMenuContent side="bottom">
          <ContextMenuGroup>
            <ContextMenuItem>بازگشت</ContextMenuItem>
            <ContextMenuItem>جلو</ContextMenuItem>
            <ContextMenuItem>بارگذاری مجدد</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger className="flex min-h-28 w-full items-center justify-center rounded-xl border border-dashed p-4 text-sm">
          <span className="hidden pointer-fine:inline-block">
            راست‌کلیک (چپ)
          </span>
          <span className="hidden pointer-coarse:inline-block">
            لمس طولانی (چپ)
          </span>
        </ContextMenuTrigger>
        <ContextMenuContent side="left">
          <ContextMenuGroup>
            <ContextMenuItem>بازگشت</ContextMenuItem>
            <ContextMenuItem>جلو</ContextMenuItem>
            <ContextMenuItem>بارگذاری مجدد</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  );
}

Context Menu

Code

Dependencies

More by miladjoodi

Image Diff Slider

Card

Drag Scroll

Explore more