Context Menu

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add context-menu

Usage#

import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent,
  ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut,
} from "@/components/ui/context-menu"
import { Card } from "@/components/ui/card"
import { Copy, PencilSimple, Trash } from "koala-icons"
export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <Card className="w-72 select-none p-6">Right-click me</Card>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          <PencilSimple /> Rename
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy /> Duplicate
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash /> Delete
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Anatomy#

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuShortcut,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuLabel />
    <ContextMenuGroup>
      <ContextMenuItem>
        <ContextMenuShortcut />
      </ContextMenuItem>
    </ContextMenuGroup>
    <ContextMenuCheckboxItem />
    <ContextMenuRadioGroup>
      <ContextMenuRadioItem />
    </ContextMenuRadioGroup>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent />
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Any surface as the trigger#

Wrap any element with ContextMenuTrigger and asChild; the menu opens at the cursor anywhere inside it. An image is the classic right-click target.

PreviewCode

Checkbox items#

Toggle independent options straight from the menu. ContextMenuCheckboxItem closes the menu when toggled, like any row; pass closeOnSelect={false} to flip several in one pass.

Switch items#

Pass variant="switch" to a checkbox item for an option that applies the moment it flips. The menu stays open when it is toggled, so a few can be set before it closes; the row is still a menu checkbox, with the switch as its drawing.

Radio items#

A mutually exclusive choice lives in a ContextMenuRadioGroup with a shared value; the active row shows a check.

Groups, submenus & shortcuts#

Section items with ContextMenuGroup, nest a ContextMenuSub, and add right-aligned hints with ContextMenuShortcut (decorative; wire the real binding in your app). Use inset to align items that have no leading icon.

API reference#

FAQ#