Context Menu component

Right-click menu for an area, opening at the pointer and flipping at screen edges. Shares Dropdown Menu's items, checkbox and radio items, keyboard and typeahead; Menu key or Shift+F10 opens it from the keyboard.

npx @kznlabs/labsui add context-menu

0:42

Insane 1v4 clutch

3:10

Boss fight, no hits

0:18

Funniest fail

Right-click a clip, or focus one and press Shift+F10.

import { Copy, Play, Trash2 } from "lucide-react";import {  ContextMenu,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "@/components/ui/context-menu";export function ClipCard({  title,  onDelete,}: {  title: string;  onDelete: () => void;}) {  return (    <ContextMenu>      <ContextMenuTrigger aria-label={title}>{title}</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuItem>          <Play />          Play        </ContextMenuItem>        <ContextMenuItem shortcut="⌘C">          <Copy />          Copy link        </ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem variant="destructive" onSelect={onDelete}>          <Trash2 />          Delete        </ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

<ContextMenu>

Right-click menu for an area. The trigger is the area; the menu opens at the pointer.

children*
ReactNode
ContextMenuTrigger and ContextMenuContent.
onOpenChange
(open: boolean) => void
Called when the menu opens at the pointer or closes.

Prop	Type	Default
`children*` `ContextMenuTrigger` and `ContextMenuContent`.	`ReactNode`	—
`onOpenChange` Called when the menu opens at the pointer or closes.	`(open: boolean) => void`	—

<ContextMenuContent>

children*
ReactNode
Items, labels, groups and separators.
aligndefault "start"
"start" | "end"
Edge of the trigger the menu lines up with.

Prop	Type	Default
`children*` Items, labels, groups and separators.	`ReactNode`	—
`align` Edge of the trigger the menu lines up with.	`"start" \| "end"`	`"start"`

<ContextMenuItem>

children*
ReactNode
Label, optionally with a leading icon.
disabled
boolean
Shown but not selectable.
onSelect
() => void
Called on click or Enter; the menu then closes.
shortcut
string
Right-aligned hint, e.g. "⌘S".
variantdefault "default"
"default" | "destructive"
"destructive": red, for irreversible actions.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`disabled` Shown but not selectable.	`boolean`	—
`onSelect` Called on click or Enter; the menu then closes.	`() => void`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—
`variant` "destructive": red, for irreversible actions.	`"default" \| "destructive"`	`"default"`

<ContextMenuCheckboxItem>

checked*
boolean
Shows the check mark.
children*
ReactNode
Label, optionally with a leading icon.
onCheckedChange*
(checked: boolean) => void
Called with the new state.
disabled
boolean
Shown but not selectable.
shortcut
string
Right-aligned hint, e.g. "⌘S".

Prop	Type	Default
`checked*` Shows the check mark.	`boolean`	—
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`onCheckedChange*` Called with the new state.	`(checked: boolean) => void`	—
`disabled` Shown but not selectable.	`boolean`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—

<ContextMenuRadioGroup>

children*
ReactNode
DropdownMenuRadioItems.
onValueChange*
(value: string) => void
Called with the picked item's value.
value*
string
Value of the checked item.

Prop	Type	Default
`children*` `DropdownMenuRadioItem`s.	`ReactNode`	—
`onValueChange*` Called with the picked item's value.	`(value: string) => void`	—
`value*` Value of the checked item.	`string`	—

<ContextMenuRadioItem>

children*
ReactNode
Label, optionally with a leading icon.
value*
string
Checked when it equals the group's value.
disabled
boolean
Shown but not selectable.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`value*` Checked when it equals the group's `value`.	`string`	—
`disabled` Shown but not selectable.	`boolean`	—

<ContextMenuLabel>

Also accepts every <div> prop (none of its own).

<ContextMenuSeparator>

<ContextMenuTrigger>

The right-clickable area. Keyboard: focus it (it is focusable) and press the Menu key or Shift+F10; the menu opens at its center on the first item.

Also accepts every <div> prop (none of its own).

* required. Every component also takes className.