context-menu | Kamod UI

Installation

Import primitives from `@/components/kamod-ui/context-menu`. Compose `ContextMenu`, `ContextMenuTrigger`, and `ContextMenuContent`; add `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuShortcut`, `ContextMenuSeparator`, `ContextMenuSub*`, checkbox and radio items as needed.

pnpm add @kamod-ch/ui

Usage

Optional controlled root: `open`, `defaultOpen`, `onOpenChange`. `ContextMenuItem` closes the menu on activate; checkbox/radio/sub-triggers do not. Use `pointer-fine:` / `pointer-coarse:` on the trigger hint text (see examples). Subpanels use `absolute` placement with RTL chevron flip.

import { ContextMenu } from "@/components/kamod-ui/context-menu";

<ContextMenu />

Combined demo

Shortcuts, submenu, checkboxes, and radio group in one menu — matches the overview example on ui.shadcn.com.

Basic

Small action list inside a group.

Submenu

`ContextMenuSub`, `ContextMenuSubTrigger`, and `ContextMenuSubContent` for nested actions.

Shortcuts

`ContextMenuShortcut` for trailing keyboard hints.

Groups

`ContextMenuLabel` + `ContextMenuSeparator` to structure sections.

Icons

Leading icons (lucide-preact) with destructive row.

Checkboxes

`ContextMenuCheckboxItem` with `checked` / `defaultChecked` / `onCheckedChange`.

Radio

Controlled `ContextMenuRadioGroup` with `value` and `onValueChange`.

Destructive

`ContextMenuItem variant="destructive"` for dangerous actions.

API Reference

Props, slots and variants for this component.

Context Menu

Context Menu component props and accepted values.

Prop	Type	Default
open / defaultOpen / onOpenChange	`boolean + callback`	`uncontrolled`
ContextMenuTrigger	`div`	`right-click + long-press (touch)`
ContextMenuItem variant	`"default" \| "destructive"`	`"default"`
ContextMenuItem inset	`boolean`	`false`
ContextMenuCheckboxItem	`checked / onCheckedChange`	`—`
ContextMenuRadioGroup	`value / onValueChange / defaultValue`	`—`

Accessibility Notes

Prefer not to hide the only path to an action behind the context menu alone. Menu uses `role="menu"` and items `role="menuitem"` / `menuitemcheckbox` / `menuitemradio`. Escape closes the root menu.