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>
      <HugeIcon icon={Copy01Icon} />
      Copy
      <ContextMenuShortcut>⌘C</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      <HugeIcon icon={Scissor01Icon} />
      Cut
      <ContextMenuShortcut>⌘X</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      <HugeIcon icon={ClipboardIcon} />
      Paste
      <ContextMenuShortcut>⌘V</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive>
      <HugeIcon icon={Delete02Icon} />
      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>
      <HugeIcon icon={FolderAddIcon} />
      New Folder
    </ContextMenuItem>
    <ContextMenuItem>
      <HugeIcon icon={PencilEdit01Icon} />
      Rename
    </ContextMenuItem>
    <ContextMenuItem>
      <HugeIcon icon={Share01Icon} />
      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>
      <HugeIcon icon={Delete02Icon} />
      Delete permanently
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Submenu, checkbox, and radio items

ContextMenuSub opens a second-level menu on hover, click, or ArrowRight. Checkbox and radio items keep the menu open and emit context-menu-checkbox-change / context-menu-radio-change custom events.

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>Back</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Save page as…</ContextMenuItem>
        <ContextMenuItem>Create shortcut</ContextMenuItem>
        <ContextMenuItem>Developer tools</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>Show bookmarks</ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>Show full URLs</ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>People</ContextMenuLabel>
    <ContextMenuRadioGroup defaultValue="pedro">
      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </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
ContextMenuSub - Wraps a submenu trigger and its content
ContextMenuSubTrigger - Item that opens the submenu
ContextMenuSubContent - The nested submenu panel
ContextMenuCheckboxItem - Toggleable item with a check indicator
ContextMenuRadioGroup - Groups radio items with a single selection
ContextMenuRadioItem - Selectable item within a radio group

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

ContextMenuSubTrigger

Prop	Type	Default	Description
disabled	boolean	false	Disables the submenu trigger
inset	boolean	false	Adds left padding for alignment
class	string	-	Additional CSS classes

ContextMenuCheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Initial checked state
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

ContextMenuRadioGroup

Prop	Type	Default	Description
defaultValue	string	-	Initially selected value
class	string	-	Additional CSS classes

ContextMenuRadioItem

Prop	Type	Default	Description
value	string	-	The value this item represents (required)
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

Events

Event	Target	Detail	Description
context-menu-checkbox-change	ContextMenuCheckboxItem	`{ checked: boolean }`	Fired when a checkbox item is toggled
context-menu-radio-change	ContextMenuRadioGroup	`{ value: string }`	Fired when the radio selection changes