Skip to main content
A context menu component that provides right-click functionality with support for actions, checkboxes, radio groups, and nested sub-menus.

​
Installation

npx shadcn@latest add @eo-n/context-menu

​
Usage

Import the components you need: 
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

​
Basic Example

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

​
Complete Example

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here to see options
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuItem inset>
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem inset>
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem inset>
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked>
          Show Line Numbers
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>
          Word Wrap
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value="light">
          <ContextMenuGroup>
            <ContextMenuGroupLabel inset>Theme</ContextMenuGroupLabel>
            <ContextMenuRadioItem value="light">
              Light
            </ContextMenuRadioItem>
            <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
            <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
          </ContextMenuGroup>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

​
API Reference

​
ContextMenu

The root component that manages the context menu state.

​
ContextMenuTrigger

The element that triggers the context menu on right-click.
​
className
string
Additional CSS classes to apply to the trigger element.

​
ContextMenuContent

The popup content container that appears on right-click.
​
sideOffset
number
default:"4"
The distance in pixels from the cursor position.
​
align
'start' | 'center' | 'end'
Alignment of the content relative to the cursor.
​
alignOffset
number
Offset along the alignment axis. Defaults to -4 when align is not ‘center’.
​
className
string
Additional CSS classes to apply to the content.

​
ContextMenuItem

An individual item in the context menu.
​
inset
boolean
Adds left padding to align with items that have icons or indicators.
​
variant
'default' | 'destructive'
default:"'default'"
Visual style variant. Use ‘destructive’ for dangerous actions like delete.
​
disabled
boolean
Disables the item, making it non-interactive.

​
ContextMenuSub

Container for a nested sub-menu.

​
ContextMenuSubTrigger

Trigger for opening a nested sub-menu.
​
inset
boolean
Adds left padding to align with other items.

​
ContextMenuGroup

Groups related menu items together.

​
ContextMenuGroupLabel

Label for a group of menu items.
​
inset
boolean
Adds left padding to align with other items.

​
ContextMenuSeparator

Visual separator between menu items or groups.

​
ContextMenuRadioGroup

Container for radio items where only one can be selected.
​
value
string
The currently selected value.
​
onValueChange
(value: string) => void
Callback when the selected value changes.

​
ContextMenuRadioItem

A radio item within a radio group.
​
value
string
required
The value of this radio item.

​
ContextMenuCheckboxItem

A checkbox item that can be toggled on/off.
​
checked
boolean
Whether the checkbox is checked.
​
onCheckedChange
(checked: boolean) => void
Callback when the checked state changes.

​
ContextMenuShortcut

Displays keyboard shortcuts for menu items. 
<ContextMenuItem>
  Save <ContextMenuShortcut>⌘S</ContextMenuShortcut>
</ContextMenuItem>

​
Examples

​
With Icons

import { Copy, Paste, Scissors } from "lucide-react";

<ContextMenuContent>
  <ContextMenuItem>
    <Copy className="mr-2 h-4 w-4" />
    Copy
  </ContextMenuItem>
  <ContextMenuItem>
    <Paste className="mr-2 h-4 w-4" />
    Paste
  </ContextMenuItem>
  <ContextMenuItem>
    <Scissors className="mr-2 h-4 w-4" />
    Cut
  </ContextMenuItem>
</ContextMenuContent>

​
With Nested Menu

<ContextMenuContent>
  <ContextMenuItem>Open</ContextMenuItem>
  <ContextMenuSub>
    <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Email</ContextMenuItem>
      <ContextMenuItem>Message</ContextMenuItem>
      <ContextMenuItem>Copy Link</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenuSub>
  <ContextMenuSeparator />
  <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
</ContextMenuContent>

​
With Image or Card

<ContextMenu>
  <ContextMenuTrigger>
    <img
      src="/image.jpg"
      alt="Right click for options"
      className="rounded-md"
    />
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>View Full Size</ContextMenuItem>
    <ContextMenuItem>Download</ContextMenuItem>
    <ContextMenuItem>Copy Image</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Set as Wallpaper</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

​
Features

  • Right-Click Activation: Native context menu behavior
  • Flexible Positioning: Automatically positions near cursor
  • Nested Sub-menus: Support for multi-level menu hierarchies
  • Rich Content: Support for icons, shortcuts, checkboxes, and radio items
  • Variant Styles: Built-in destructive variant for dangerous actions
  • Keyboard Navigation: Full keyboard support with arrow keys
  • Collision Detection: Automatically adjusts position to stay in viewport
  • Smooth Animations: Built-in entrance and exit animations
  • Accessible: Proper ARIA attributes and focus management

​
Accessibility

  • Right-click and Shift+F10 keyboard shortcut to open
  • Keyboard navigation with arrow keys, Enter, and Escape
  • Focus management and focus trapping
  • Proper ARIA roles and attributes
  • Screen reader announcements for state changes
  • Disabled state support

​
Use Cases

  • File/Folder Actions: Right-click menus for file operations
  • Text Selection: Context actions for selected text
  • Image Operations: Menu options for image manipulation
  • Table Rows: Row-specific actions in data tables
  • Canvas Elements: Context actions for design tools
  • Code Editors: Context-aware code actions

Build docs developers (and LLMs) love

Get started for freeTalk to us