Koala UIContext Menu
The actions menu that opens where you right-click. Built on Radix ContextMenu for keyboard navigation and a11y; it shares its surface and density with Dropdown Menu, but anchors to the cursor.
Installation#
Usage#
import {
ContextMenu, ContextMenuTrigger, ContextMenuContent,
ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut,
} from "@/components/ui/context-menu"
import { Card } from "@/components/ui/card"
import { Copy, PencilSimple, Trash } from "@phosphor-icons/react"
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>
)
}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.
Checkbox items#
Toggle independent options straight from the menu. ContextMenuCheckboxItem keeps the menu open on click so several can be flipped 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.