StorybookGitHub

Context Menu

Displays a menu of actions triggered by a right click.

Right click here

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/context-menu.json

Usage

Use a context menu for actions tied to a specific target area (files, cards, canvas regions).

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/context-menu/context-menu";

export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Profile</ContextMenuItem>
        <ContextMenuItem>Billing</ContextMenuItem>
        <ContextMenuItem>Team</ContextMenuItem>
        <ContextMenuItem>Subscription</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Compose checkboxes, radio groups, submenus, separators, and shortcuts. Mark destructive actions with variant="destructive" on ContextMenuItem.