//
Displays a menu to the user — such as a set of actions or functions.
bun add xiod-ui1import {2 DropdownMenu,3 Menu,4 DropdownMenuCheckboxItem,5 MenuCheckboxItem,6 DropdownMenuContent,7 MenuPopup,8 DropdownMenuCreateHandle,9 MenuCreateHandle,10 DropdownMenuGroup,11 MenuGroup,12 DropdownMenuItem,13 MenuItem,14 DropdownMenuLabel,15 MenuGroupLabel,16 DropdownMenuPortal,17 MenuPortal,18 DropdownMenuRadioGroup,19 MenuRadioGroup,20 DropdownMenuRadioItem,21 MenuRadioItem,22 DropdownMenuSeparator,23 MenuSeparator,24 DropdownMenuShortcut,25 MenuShortcut,26 DropdownMenuSub,27 MenuSub,28 DropdownMenuSubContent,29 MenuSubPopup,30 DropdownMenuSubTrigger,31 MenuSubTrigger,32 DropdownMenuTrigger,33 MenuTrigger,34 MenuArrow35} from "xiod-ui/menu";1<Menu>2 <DropdownMenuSubTrigger />3 <MenuSubTrigger />4 <DropdownMenuTrigger />5 <MenuTrigger />6 <DropdownMenuContent>7 <DropdownMenuLabel />8 <MenuGroupLabel />9 <DropdownMenuGroup>10 <DropdownMenuCheckboxItem />11 <MenuCheckboxItem />12 <DropdownMenuItem />13 <MenuItem />14 <DropdownMenuRadioItem />15 <MenuRadioItem />16 </DropdownMenuGroup>17 <MenuGroup>18 <DropdownMenuCheckboxItem />19 <MenuCheckboxItem />20 <DropdownMenuItem />21 <MenuItem />22 <DropdownMenuRadioItem />23 <MenuRadioItem />24 </MenuGroup>25 <DropdownMenuRadioGroup>26 <DropdownMenuCheckboxItem />27 <MenuCheckboxItem />28 <DropdownMenuItem />29 <MenuItem />30 <DropdownMenuRadioItem />31 <MenuRadioItem />32 </DropdownMenuRadioGroup>33 <MenuRadioGroup>34 <DropdownMenuCheckboxItem />35 <MenuCheckboxItem />36 <DropdownMenuItem />37 <MenuItem />38 <DropdownMenuRadioItem />39 <MenuRadioItem />40 </MenuRadioGroup>41 <DropdownMenu />42 <MenuPopup />43 <DropdownMenuPortal />44 <MenuPortal />45 <DropdownMenuSeparator />46 <MenuSeparator />47 <DropdownMenuShortcut />48 <MenuShortcut />49 <DropdownMenuSub />50 <MenuSub />51 <DropdownMenuSubContent />52 <MenuSubPopup />53 <MenuArrow />54 </DropdownMenuContent>55</Menu>| 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 | center | |
sideOffset | number| OffsetFunction| undefined | 8 | |
alignOffset | number| OffsetFunction| undefined | - | |
side | Side| undefined | bottom | |
anchor | Element| VirtualElement| RefObject<Element| null>| (() => Element| VirtualElement| null)| null| undefined | - | |
hideArrow | boolean| undefined | false |
| 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 |
|---|---|---|---|
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
handle | MenuHandle<unknown>| undefined | - | A handle to associate the trigger with a menu. |
payload | unknown | - | A payload to pass to the menu when it is opened. |
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 | - | 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: MenuTriggerState) => 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, MenuTriggerState>| 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: MenuTriggerState) => 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 |
|---|---|---|---|
style | CSSProperties| ((state: MenuArrowState) => 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: MenuArrowState) => 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, MenuArrowState>| 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. |