ContextMenu
Right-click context menu built on Radix UI with labels, separators, shortcuts, checkboxes, radio items, and submenus.
Live Demo
Right-click here
ContextMenuContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content shown inside the menu. |
onOpenChange | (open: boolean) => void | — | Callback when the menu opens or closes. |
ContextMenuItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables the item. |
onSelect | (e: Event) => void | — | Called when the item is selected. |
inset | boolean | false | Adds left padding to align with checkbox/radio items. |
Usage
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuCheckboxItem,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
} from '@ghiberti85/ui'
<ContextMenu>
<ContextMenuTrigger>
<div>Right-click me</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuLabel>File</ContextMenuLabel>
<ContextMenuSeparator />
<ContextMenuItem>
New File <ContextMenuShortcut>⌘N</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuCheckboxItem checked>Show toolbar</ContextMenuCheckboxItem>
<ContextMenuSub>
<ContextMenuSubTrigger>More</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem>Option A</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
</ContextMenuContent>
</ContextMenu>