Context Menu Component
Capsule-styled context menus with orbit hover effects and clean animations.
Card Item Actions
A context menu for card-based content with quick actions.
With Checkbox Items
Toggle visibility options using checkbox menu items.
Right click for view options
Status Bar: Visible
Activity Bar: Hidden
Panel: Hidden
With Radio Items
Select from mutually exclusive options using radio menu items.
Right click to change font size
Current: medium
API Reference
Context Menu is built on @radix-ui/react-context-menu with Capsule styling and animations.
ContextMenu
Root component that wraps context menu functionality.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Menu content and trigger |
ContextMenuTrigger
Element that triggers the context menu on right-click.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to right-click on |
ContextMenuContent
Container for menu items.
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "start" | Horizontal alignment |
| side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side to display menu |
| children | ReactNode | - | Menu items |
ContextMenuItem
Individual menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | Visual style of the item |
| disabled | boolean | false | Disable the menu item |
| onSelect | () => void | - | Callback when item is selected |
| children | ReactNode | - | Item content |
ContextMenuCheckboxItem
Menu item with checkbox state.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the checkbox is checked |
| onCheckedChange | (checked: boolean) => void | - | Callback when checked state changes |
| children | ReactNode | - | Item content |
ContextMenuRadioGroup
Container for radio items with exclusive selection.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Currently selected value |
| onValueChange | (value: string) => void | - | Callback when selected value changes |
ContextMenuRadioItem
Individual radio option within a radio group.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Value of this radio option |
| children | ReactNode | - | Option label |
ContextMenuSeparator
Visual divider between menu items.
No props required. Use as a self-closing component.
ContextMenuSub
Container for nested submenu.
Wrap ContextMenuSubTrigger and ContextMenuSubContent as children.
ContextMenuSubTrigger
Menu item that opens a submenu.
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Add left padding for icon alignment |
| children | ReactNode | - | Trigger content |
ContextMenuSubContent
Container for submenu items.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Submenu items |
ContextMenuLabel
Non-interactive label for grouping menu items.
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Add left padding for icon alignment |
| children | ReactNode | - | Label text |
ContextMenuShortcut
Display keyboard shortcut hint in menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Shortcut text (e.g., "Ctrl+C") |