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

import ContextMenu from "@/components/ui/context-menu/ContextMenu.astro";
import ContextMenuTrigger from "@/components/ui/context-menu/ContextMenuTrigger.astro";
import ContextMenuContent from "@/components/ui/context-menu/ContextMenuContent.astro";
import ContextMenuItem from "@/components/ui/context-menu/ContextMenuItem.astro";
import ContextMenuSeparator from "@/components/ui/context-menu/ContextMenuSeparator.astro";
import ContextMenuLabel from "@/components/ui/context-menu/ContextMenuLabel.astro";
import ContextMenuShortcut from "@/components/ui/context-menu/ContextMenuShortcut.astro";

Usage

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