Context Menu

⌘K

Demo

Right click here

Props

Prop	Type	Description
`items`	`MenuItem[]` (optional)	An array of menu items in various formats like default, checkbox, and radio group.
`children`	`React.ReactNode` (optional)	The trigger element for the ContextMenu.
`classNames`	`{ [key: string]: string }` (optional)	Custom class names for different parts of the ContextMenu.

MenuItem Types

`SubMenuGroup`

type: 'group'
text: string
icon: React.ReactNode (optional)
disabled: boolean (optional)
children: Array of MenuItem types (DefaultMenuItem, CheckboxMenuItem, RadioGroupMenuItem, SeparatorMenuItem)

`DefaultMenuItem`

type: 'default'
text: string
icon: React.ReactNode (optional)
shortcut: string (optional)
disabled: boolean (optional)
onSelect: (event: Event) => void (optional)

`CheckboxMenuItem`

type: 'checkbox'
text: string
shortcut: string (optional)
disabled: boolean (optional)
checked: boolean | 'indeterminate' (optional)
onCheckedChange: (checked: boolean) => void (optional)

`RadioGroupMenuItem`

type: 'radio-group'
label: string (optional)
options: { text: string; value: string }[]
value: string (optional)
onValueChange: (value: string) => void (optional)

`SeparatorMenuItem`

type: 'separator'

Styles

This component allows for custom styles via the classNames prop:

trigger: CSS class for styling the trigger element.
content: CSS class for styling the main content of the context menu.
subTrigger: CSS class for styling sub-menu triggers.
subContent: CSS class for styling sub-menu contents.
item: CSS class for styling individual menu items.
shortcut: CSS class for styling keyboard shortcuts.
separator: CSS class for styling separators.
checkboxItem: CSS class for styling checkbox items.
radioGroup: CSS class for styling radio group containers.
label: CSS class for styling labels in radio groups.
radioItem: CSS class for styling radio items.

Previous

Next