Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Right click here
Installation
npm i @huin-core/react-context-menuAPI Reference
ContextMenu
| Prop | Type | Description |
|---|---|---|
| dir | "ltr" | "rtl" | The reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
| modal | boolean | The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. |
ContextMenuTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
ContextMenuPortal
| Prop | Type | Description |
|---|---|---|
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
ContextMenuContent
| Prop | Type | Description |
|---|---|---|
| sticky | "partial" | "always" | The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| loop | boolean | When true, keyboard navigation will loop from last item to first, and vice versa. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
| avoidCollisions | boolean | When true, overrides the side andalign preferences to prevent collisions with boundary edges. |
| hideWhenDetached | boolean | Whether to hide the content when the trigger becomes fully occluded. |
| sideOffset | number | The distance in pixels from the anchor. |
| alignOffset | number | An offset in pixels from the 'start' or 'end' alignment options. |
| collisionPadding | number | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
| arrowPadding | number | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. |
| onOpenAutoFocus | function | Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. |
| onCloseAutoFocus | function | Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| onFocusOutside | function | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| onInteractOutside | function | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
ContextMenuArrow
| Prop | Type | Description |
|---|---|---|
| width | number | The width of the piece in pixels. |
| height | number | The width of the height in pixels. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
ContextMenuItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| onSelect | function | Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. |
| textValue | string | Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. |
ContextMenuGroup
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
ContextMenuLabel
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
ContextMenuCheckboxItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| checked | boolean | Represents the current state of the component, indicating whether it is enabled or selected. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| textValue | string | Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. |
| onSelect | function | Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. |
ContextMenuRadioGroup
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
ContextMenuRadioItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| textValue | string | Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. |
| onSelect | function | Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. |
ContextMenuItemIndicator
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
ContextMenuSeparator
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
ContextMenuSub
| Prop | Type | Description |
|---|---|---|
| defaultOpen | boolean | Determines whether the component should be open by default when it is initially rendered. |
| open | boolean | Controls the open state of the component. When set to true, the component is displayed; when false, it is hidden. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
ContextMenuSubTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| textValue | string | Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. |
ContextMenuSubContent
| Prop | Type | Description |
|---|---|---|
| sticky | "partial" | "always" | The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| loop | boolean | When true, keyboard navigation will loop from last item to first, and vice versa. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
| avoidCollisions | boolean | When true, overrides the side andalign preferences to prevent collisions with boundary edges. |
| hideWhenDetached | boolean | Whether to hide the content when the trigger becomes fully occluded. |
| sideOffset | number | The distance in pixels from the anchor. |
| alignOffset | number | An offset in pixels from the 'start' or 'end' alignment options. |
| collisionPadding | number | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
| arrowPadding | number | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. |
| onOpenAutoFocus | function | Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. |
| onCloseAutoFocus | function | Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| onFocusOutside | function | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| onInteractOutside | function | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Activates the focused item. |
ArrowDown | Moves focus to the next item. |
ArrowUp | Moves focus to the previous item. |
Esc | Closes the menu. |