Context Menu | Bearnie

Right click here

<ContextMenu>
  <ContextMenuTrigger>
    <div class="flex h-36 w-full items-center justify-center rounded-md border border-dashed px-4 text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <Copy />
      Copy
      <ContextMenuShortcut>⌘C</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      <Scissors />
      Cut
      <ContextMenuShortcut>⌘X</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      <Clipboard />
      Paste
      <ContextMenuShortcut>⌘V</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive>
      <Trash2 />
      Delete
      <ContextMenuShortcut>⌫</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Installation

npx bearnie add context-menu

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Settings</ContextMenuItem>
    <ContextMenuItem>Logout</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

Basic

Right click here

<ContextMenu>
  <ContextMenuTrigger>
    <div class="flex h-24 w-full items-center justify-center rounded-md border border-dashed px-4 text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>View</ContextMenuItem>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Duplicate</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With icons

Right click here

<ContextMenu>
  <ContextMenuTrigger>
    <div class="flex h-24 w-full items-center justify-center rounded-md border border-dashed px-4 text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <FolderPlus />
      New folder
    </ContextMenuItem>
    <ContextMenuItem>
      <PencilLine />
      Rename
    </ContextMenuItem>
    <ContextMenuItem>
      <Share />
      Share
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With groups

Right click here

<ContextMenu>
  <ContextMenuTrigger>
    <div class="flex h-24 w-full items-center justify-center rounded-md border border-dashed px-4 text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>Edit</ContextMenuLabel>
    <ContextMenuItem>Undo</ContextMenuItem>
    <ContextMenuItem>Redo</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>Selection</ContextMenuLabel>
    <ContextMenuItem>Select all</ContextMenuItem>
    <ContextMenuItem>Deselect</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Destructive

Right click here

<ContextMenu>
  <ContextMenuTrigger>
    <div class="flex h-24 w-full items-center justify-center rounded-md border border-dashed px-4 text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Move to archive</ContextMenuItem>
    <ContextMenuItem>Mark as read</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive>
      <Trash2 />
      Delete permanently
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Anatomy

ContextMenu - Root container with event handling
ContextMenuTrigger - The area that responds to right-click
ContextMenuContent - The menu that appears at cursor position
ContextMenuItem - Individual menu actions
ContextMenuSeparator - Visual divider between groups
ContextMenuLabel - Non-interactive group heading
ContextMenuShortcut - Keyboard shortcut hint

Props

ContextMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Disables the menu item
destructive	boolean	false	Styles as a destructive action
inset	boolean	false	Adds left padding for alignment
class	string	-	Additional CSS classes

ContextMenuLabel

Prop	Type	Default	Description
inset	boolean	false	Adds left padding for alignment
class	string	-	Additional CSS classes