Context Menu
The Context Menu component is used to show options.
1. Import
KUMUI exports 12 ContextMenu-related components:
import { ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent, } from "@rohitgadekar/kimui";
2. Usage
Right-click anywhere inside this box
3. API
3.1 ContextMenu
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Content inside the Context Menu, including trigger and content | - |
3.2 ContextMenuTrigger
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Element that triggers the context menu when right-clicked | - |
3.3 ContextMenuContent
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Context menu items, labels, or submenus to display | - |
3.4 ContextMenuLabel
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Label for group of context menu items or actions | - |
3.5 ContextMenuItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The text or label for each individual context menu item | - |
| onSelect | (event: React.MouseEvent) => void | Callback function when the item is selected | - |
3.6 ContextMenuSeparator
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Separator between menu items | - |
3.7 ContextMenuCheckboxItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| checked | boolean | Indicates if the checkbox item is checked or unchecked | false |
| onCheckedChange | (checked: boolean) => void | Callback function when the checkbox value changes | - |
3.8 ContextMenuRadioGroup
| Attribute | Type | Description | Default |
|---|---|---|---|
| value | string | The selected value from the radio group | - |
| onValueChange | (value: string) => void | Callback function when the selected radio item changes | - |
3.9 ContextMenuRadioItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| value | string | Value that corresponds to the selected radio item | - |
3.10 ContextMenuSub
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Submenu content or additional options that can be expanded | - |
3.11 ContextMenuSubTrigger
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The label or text that triggers the submenu when hovered or clicked | - |
3.12 ContextMenuSubContent
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Content of the submenu to display | - |