Menubar

The value of the currently active menu.

A callback function called when the active menu value changes.

Whether or not the value is controlled or not. If true, the component will not update the value state internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

The reading direction of the app.

Whether or not to loop through the menubar menu triggers when navigating with the keyboard.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The value of this menu within the menubar, used to identify it when determining which menu is active.

The open state of the menu.

A callback that is fired when the menu's open state changes.

Whether or not the open state is controlled or not. If true, the component will not update the open state internally, instead it will call onOpenChange when it would have otherwise, and it is up to you to update the open prop that is passed to the component.

The reading direction of the app.

The children content to render.

Whether or not the menu trigger is disabled.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The open state of the menu or submenu the element controls or belongs to.

Present on the trigger element.

Where to render the content when it is open. Defaults to the body. Can be disabled by passing null

Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.

The children content to render.

The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.

The distance in pixels from the anchor to the floating element.

The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.

The distance in pixels from the anchor to the floating element.

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

When true, overrides the side and align options to prevent collisions with the boundary edges.

A boundary element or array of elements to check for collisions against.

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

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.

When true, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.

The strategy to use when updating the position of the content. When 'optimized' the content will only be repositioned when the trigger is in the viewport. When 'always' the content will be repositioned whenever the position changes.

The positioning strategy to use for the floating element. When 'fixed' the element will be positioned relative to the viewport. When 'absolute' the element will be positioned relative to the nearest positioned ancestor.

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Callback fired when an outside interaction event completes, which is either a pointerup, mouseup, or touchend event, depending on the user's input device. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Whether or not to trap the focus within the content when open.

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

When true, prevents the text selection from overflowing the bounds of the element.

The reading direction of the app.

Whether or not to loop through the menu items in when navigating with the keyboard.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The open state of the menu or submenu the element controls or belongs to.

Present on the content element.

Whether or not the menu item is disabled.

The text value of the checkbox menu item. This is used for typeahead.

A callback that is fired when the menu item is selected.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present when the menu item is highlighted.

Present when the menu item is disabled.

Present on the item element.

Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

The checkbox menu item's checked state.

A callback that is fired when the checkbox menu item's checked state changes.

Whether or not the checked state is controlled or not. If true, the component will not update the checked state internally, instead it will call onCheckedChange when it would have otherwise, and it is up to you to update the checked prop that is passed to the component.

The text value of the checkbox menu item. This is used for typeahead.

A callback that is fired when the menu item is selected.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present when the menu item is highlighted.

Present when the menu item is disabled.

The checkbox menu item's checked state.

The value of the currently checked radio menu item.

A callback that is fired when the radio group's value changes.

Whether or not the value is controlled or not. If true, the component will not update the value state internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present on the radio group element.

The value of the radio item. When checked, the parent RadioGroup's value will be set to this value.

Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

The text value of the checkbox menu item. This is used for typeahead.

A callback that is fired when the menu item is selected.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present when the menu item is highlighted.

Present when the menu item is disabled.

The radio menu item's checked state.

The value of the radio item.

Present on the radio item element.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The orientation of the separator.

Present on the separator element.

The width of the arrow in pixels.

The height of the arrow in pixels.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The open state of the menu or submenu the element controls or belongs to.

Present on the arrow element.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present on the group element.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present on the group heading element.

The open state of the submenu.

A callback that is fired when the submenu's open state changes.

Whether or not the open state is controlled or not. If true, the component will not update the open state internally, instead it will call onOpenChange when it would have otherwise, and it is up to you to update the open prop that is passed to the component.

The children content to render.

Whether or not the submenu trigger is disabled.

The text value of the checkbox menu item. This is used for typeahead.

A callback that is fired when the menu item is selected.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

Present when the menu item is highlighted.

Present when the menu item is disabled.

The open state of the menu or submenu the element controls or belongs to.

Present on the submenu trigger element.

The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.

The distance in pixels from the anchor to the floating element.

The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.

The distance in pixels from the anchor to the floating element.

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

When true, overrides the side and align options to prevent collisions with the boundary edges.

A boundary element or array of elements to check for collisions against.

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

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.

When true, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.

The strategy to use when updating the position of the content. When 'optimized' the content will only be repositioned when the trigger is in the viewport. When 'always' the content will be repositioned whenever the position changes.

The positioning strategy to use for the floating element. When 'fixed' the element will be positioned relative to the viewport. When 'absolute' the element will be positioned relative to the nearest positioned ancestor.

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Callback fired when an outside interaction event completes, which is either a pointerup, mouseup, or touchend event, depending on the user's input device. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Whether or not to trap the focus within the content when open.

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

When true, prevents the text selection from overflowing the bounds of the element.

The reading direction of the app.

Whether or not to loop through the menu items in when navigating with the keyboard.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The open state of the menu or submenu the element controls or belongs to.

Present on the submenu content element.

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Callback fired when an outside interaction event completes, which is either a pointerup, mouseup, or touchend event, depending on the user's input device. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Whether or not to trap the focus within the content when open.

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

When true, prevents the text selection from overflowing the bounds of the element.

The reading direction of the app.

Whether or not to loop through the menu items when reaching the end of the list when using the keyboard.

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

Use render delegation to render your own element. See Child Snippet docs for more information.

The open state of the menu or submenu the element controls or belongs to.

Present on the submenu content element.