//
Displays a menu to the user — such as a set of actions or functions — triggered by a right-click.
bun add xiod-ui1import {2 ContextMenu,3 ContextMenuCheckboxItem,4 ContextMenuContent,5 ContextMenuGroup,6 ContextMenuItem,7 ContextMenuLabel,8 ContextMenuPortal,9 ContextMenuRadioGroup,10 ContextMenuRadioItem,11 ContextMenuSeparator,12 ContextMenuShortcut,13 ContextMenuSub,14 ContextMenuSubContent,15 ContextMenuSubTrigger,16 ContextMenuTrigger17} from "xiod-ui/context-menu";1<ContextMenu>2 <ContextMenuSubTrigger />3 <ContextMenuTrigger />4 <ContextMenuContent>5 <ContextMenuLabel />6 <ContextMenuGroup>7 <ContextMenuCheckboxItem />8 <ContextMenuItem />9 <ContextMenuRadioItem />10 </ContextMenuGroup>11 <ContextMenuRadioGroup>12 <ContextMenuCheckboxItem />13 <ContextMenuItem />14 <ContextMenuRadioItem />15 </ContextMenuRadioGroup>16 <ContextMenuPortal />17 <ContextMenuSeparator />18 <ContextMenuShortcut />19 <ContextMenuSub />20 <ContextMenuSubContent />21 </ContextMenuContent>22</ContextMenu>| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | ((open: boolean, eventDetails: ContextMenuRootChangeEventDetails) => void)| undefined | - | Event handler called when the menu is opened or closed. |
closeParentOnEsc | boolean| undefined | - | @ignore @deprecated This prop has no effect on Context Menu. |
orientation | MenuRootOrientation| undefined | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
actionsRef | RefObject<MenuRootActions| null>| undefined | - | A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively. |
open | boolean| undefined | - | Whether the menu is currently open. |
defaultOpen | boolean| undefined | false | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | Event handler called after any animations complete when the menu is opened or closed. |
loopFocus | boolean| undefined | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
highlightItemOnHover | boolean| undefined | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. |
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean| undefined | - | Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead. |
defaultChecked | boolean| undefined | false | Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead. |
onCheckedChange | ((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)| undefined | - | Event handler called when the checkbox item is ticked or unticked. |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)| undefined | - | The click handler for the menu item. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
label | string| undefined | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
id | string| undefined | - | @ignore |
closeOnClick | boolean| undefined | false | Whether to close the menu when the item is clicked. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: MenuCheckboxItemState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuCheckboxItemState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuCheckboxItemState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
variant | "default"| "switch"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | @ignore |
finalFocus | boolean| RefObject<HTMLElement| null>| ((closeType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. |
className | string| ((state: MenuPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
align | Align| undefined | start | |
sideOffset | number| OffsetFunction| undefined | 8 | |
alignOffset | number| OffsetFunction| undefined | - | |
side | Side| undefined | bottom |
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content of the component. |
className | string| ((state: MenuGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuGroupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)| undefined | - | The click handler for the menu item. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
label | string| undefined | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
id | string| undefined | - | @ignore |
closeOnClick | boolean| undefined | true | Whether to close the menu when the item is clicked. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: MenuItemState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuItemState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuItemState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
inset | boolean| undefined | - | |
variant | "default"| "destructive"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: MenuGroupLabelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuGroupLabelState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuGroupLabelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
inset | boolean| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: MenuPortalState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: MenuPortalState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuPortalState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
keepMounted | boolean| undefined | false | Whether to keep the portal mounted in the DOM while the popup is hidden. |
container | HTMLElement| ShadowRoot| RefObject<HTMLElement| ShadowRoot| null>| null| undefined | - | A parent element to render the portal element into. |
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content of the component. |
value | any | - | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. |
defaultValue | any | - | The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead. |
onValueChange | ((value: any, eventDetails: MenuRootChangeEventDetails) => void)| undefined | - | Function called when the selected value changes. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
className | string| ((state: MenuRadioGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuRadioGroupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuRadioGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
valueReq | any | - | Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected. |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)| undefined | - | The click handler for the menu item. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
label | string| undefined | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
id | string| undefined | - | @ignore |
closeOnClick | boolean| undefined | false | Whether to close the menu when the item is clicked. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: MenuRadioItemState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuRadioItemState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuRadioItemState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | Orientation| undefined | vertical | The orientation of the separator. |
className | string| ((state: SeparatorState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, SeparatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: SeparatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | ((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)| undefined | - | Event handler called when the menu is opened or closed. |
closeParentOnEsc | boolean| undefined | false | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
children | ReactNode | - | The content of the submenu. |
orientation | MenuRootOrientation| undefined | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
actionsRef | RefObject<MenuRootActions| null>| undefined | - | A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively. |
open | boolean| undefined | - | Whether the menu is currently open. |
defaultOpen | boolean| undefined | false | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | Event handler called after any animations complete when the menu is opened or closed. |
loopFocus | boolean| undefined | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
highlightItemOnHover | boolean| undefined | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | @ignore |
finalFocus | boolean| RefObject<HTMLElement| null>| ((closeType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. |
className | string| ((state: MenuPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
align | Align| undefined | start | |
sideOffset | number| OffsetFunction| undefined | 0 | |
alignOffset | number| OffsetFunction| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)| undefined | - | |
label | string| undefined | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
id | string| undefined | - | @ignore |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
delay | number| undefined | 100 | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. |
closeDelay | number| undefined | 0 | How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. |
openOnHover | boolean| undefined | true | Whether the menu should also open when the trigger is hovered. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: MenuSubmenuTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MenuSubmenuTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
inset | boolean| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: ContextMenuTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ContextMenuTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ContextMenuTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |