A horizontal bar of menus, as in a desktop app.
bun add xiod-ui1import {2 Menubar,3 MenubarCheckboxItem,4 MenubarGroup,5 MenubarItem,6 MenubarLabel,7 MenubarMenu,8 MenubarPopup,9 MenubarPortal,10 MenubarRadioGroup,11 MenubarRadioItem,12 MenubarSeparator,13 MenubarShortcut,14 MenubarSub,15 MenubarSubPopup,16 MenubarSubTrigger,17 MenubarTrigger18} from "xiod-ui/menubar";1<Menubar>2 <MenubarMenu>3 <MenubarTrigger />4 <MenubarPopup>5 <MenubarItem>6 <MenubarShortcut />7 </MenubarItem>8 <MenubarSeparator />9 <MenubarSub>10 <MenubarSubTrigger />11 <MenubarSubPopup>12 <MenubarItem />13 <MenubarSeparator />14 </MenubarSubPopup>15 </MenubarSub>16 </MenubarPopup>17 </MenubarMenu>18</Menubar>Detailed documentation of properties and options.
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Whether the whole menubar is disabled. |
loopFocus |
booleantrue |
Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
modal | boolean | true | Whether the menubar is modal. |
orientation | "horizontal"|"vertical" | 'horizontal' | The orientation of the menubar. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | – | Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the |
closeOnClick | boolean | false | Whether to close the menu when the item is clicked. |
defaultChecked | boolean | false | Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the |
disabled | boolean | false | Whether the component should ignore user interaction. |
label | string | – | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided. |
nativeButton | boolean | false | Whether the component renders a native |
onCheckedChange | ((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void) | – | Event handler called when the checkbox item is ticked or unticked. |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) | – | The click handler for the menu item. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | The content of the component. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
closeOnClick | boolean | true | Whether to close the menu when the item is clicked. |
disabled | boolean | false | Whether the component should ignore user interaction. |
inset | boolean | – | Whether to indent the item so its text lines up with items that have an icon. |
label | string | – | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided. |
nativeButton | boolean | false | Whether the component renders a native |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) | – | The click handler for the menu item. |
variant | "default"|"destructive" | – | The visual style of the component. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | – | Whether to indent the label so it lines up with items that have an icon. |
| Prop | Type | Default | Description |
|---|---|---|---|
actionsRef | RefObject<MenuRootActions | null> | – | A ref to imperative actions.
|
children | ReactNode | PayloadChildRenderFunction<unknown> | – | The content of the menu. This can be a regular React node or a render function that receives the |
closeParentOnEsc | boolean | false | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
defaultOpen | boolean | false | Whether the menu is initially open. To render a controlled menu, use the |
defaultTriggerId | string|null | – | ID of the trigger that the menu is associated with. This is useful in conjunction with the |
disabled | boolean | false | Whether the component should ignore user interaction. |
handle | MenuHandle<unknown> | – | A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state. |
highlightItemOnHover | boolean | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS |
loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
modal | boolean | true | Determines if the menu enters a modal state when open.
On touch devices, a Nested menus ignore this prop, and menus opened by hover are never modal. |
onItemHighlighted | ((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void) | – | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or
|
onOpenChange | ((open: boolean, eventDetails: MenuRootChangeEventDetails) => void) | – | Event handler called when the menu is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void) | – | Event handler called after any animations complete when the menu is opened or closed. |
open | boolean | – | Whether the menu is currently open. |
orientation | "horizontal"|"vertical" | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
triggerId | string|null | – | ID of the trigger that the menu is associated with. This is useful in conjunction with the |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center"|"start"|"end" | start | How the calendar lines up with the trigger along that side. |
alignOffset | number|OffsetFunction | – | Additional offset along the alignment axis, in pixels. |
anchor | Menu.Positioner.Props["anchor"] | – | An element to position the popup against. Defaults to the trigger. |
children | ReactNode | – | The content of the component. |
finalFocus | boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null) | – | Determines the element to focus when the menu is closed.
|
hideArrow | boolean | false | Whether to hide the arrow that points at the menu's trigger. |
side | "top"|"bottom"|"left"|"right"|"inline-end"|"inline-start" | – | Which side of the copy button the tooltip and toast open on. |
sideOffset | number|OffsetFunction | 10 | The gap between the trigger and the calendar, in pixels. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null | – | A parent element to render the portal element into. |
keepMounted | boolean | false | Whether to keep the portal mounted in the DOM while the popup is hidden. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | The content of the component. |
defaultValue | any | – | The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the |
disabled | boolean | false | Whether the component should ignore user interaction. |
onValueChange | ((value: any, eventDetails: MenuRootChangeEventDetails) => void) | – | Function called when the selected value changes. |
value | any | – | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the |
Accepts className, style and render, plus every native attribute of the element it renders.
| 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. |
closeOnClick | boolean | false | Whether to close the menu when the item is clicked. |
disabled | boolean | false | Whether the component should ignore user interaction. |
label | string | – | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided. |
nativeButton | boolean | false | Whether the component renders a native |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) | – | The click handler for the menu item. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal"|"vertical" | 'horizontal' | The orientation of the separator. |
Accepts every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
actionsRef | RefObject<MenuRootActions | null> | – | A ref to imperative actions.
|
children | ReactNode | – | The content of the submenu. |
closeParentOnEsc | boolean | false | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
defaultOpen | boolean | false | Whether the menu is initially open. To render a controlled menu, use the |
disabled | boolean | false | Whether the component should ignore user interaction. |
highlightItemOnHover | boolean | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS |
loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
onItemHighlighted | ((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void) | – | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or
|
onOpenChange | ((open: boolean, eventDetails: MenuRootChangeEventDetails) => void) | – | Event handler called when the menu is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void) | – | Event handler called after any animations complete when the menu is opened or closed. |
open | boolean | – | Whether the menu is currently open. |
orientation | "horizontal"|"vertical" | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | The content of the component. |
finalFocus | boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null) | – | Determines the element to focus when the menu is closed.
|
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
closeDelay | number | 0 | How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the |
delay | number | 100 | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the |
disabled | boolean | false | Whether the component should ignore user interaction. |
inset | boolean | – | Whether to indent the item so its text lines up with items that have an icon. |
label | string | – | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided. |
nativeButton | boolean | false | Whether the component renders a native |
onClick | ((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) | – | The click handler for the menu item. |
openOnHover | boolean | true | Whether the menu should also open when the trigger is hovered. |
Accepts className, style and render, plus every native attribute of the element it renders.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | The content of the component. |
closeDelay | number | 0 | How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the |
delay | number | 100 | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the |
disabled | boolean | false | Whether the component should ignore user interaction. |
handle | MenuHandle<unknown> | – | A handle to associate the trigger with a menu. |
nativeButton | boolean | true | Whether the component renders a native |
openOnHover | boolean | – | Whether the menu should also open when the trigger is hovered. |
payload | unknown | – | A payload to pass to the menu when it is opened. |