Menu · base-ui-svelte

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Menu.Root

Groups all parts of the menu. Doesn't render its own HTML element.

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

onOpenChangeComplete function —

Name: onOpenChangeComplete
Description: Called after open/close animations complete.
Type: ((open: boolean) => void) | undefined

modal boolean true

Name: modal
Description: Whether the menu enters a modal state when open.
Type: boolean
Default: true

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

orientation 'horizontal' | 'vertical' 'horizontal'

Name: orientation
Description: The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
Type: 'horizontal' | 'vertical'
Default: 'horizontal'

loopFocus boolean true

Name: loopFocus
Description: Whether highlight wraps at list ends.
Type: boolean
Default: true

openOnHover boolean —

Name: openOnHover
Description: Open the menu when the pointer enters the trigger.
Type: boolean

delay number 0

Name: delay
Description: Open delay when openOnHover is set (ms).
Type: number
Default: 0

closeDelay number 0

Name: closeDelay
Description: Close delay when leaving trigger/popup under hover (ms).
Type: number
Default: 0

handle MenuHandle —

Name: handle
Description: Imperative handle from .
Type: MenuHandle | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean; payload: unknown }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.
`data-orientation`	The orientation of the component.

Menu.Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu popup is closed.
`data-open`	Present when the menu popup is open.

Menu.Backdrop

An overlay displayed beneath the menu popup. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

dismissible boolean —

Name: dismissible
Description: —
Type: boolean

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu is closed.
`data-open`	Present when the menu is open.

Menu.CheckboxItem

A menu item that toggles a setting on or off. Renders a <div> element.

Props

checked boolean —

Name: checked
Description: Controlled checked state.
Type: boolean | undefined

defaultChecked boolean false

Name: defaultChecked
Description: Uncontrolled initial checked state.
Type: boolean
Default: false

onCheckedChange function —

Name: onCheckedChange
Description: Event handler called when the checked state changes.
Type: ((checked: boolean, event: Event) => void) | undefined

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ checked: boolean }]>

Data attributes

Attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-highlighted`	Present when the menu checkbox item is highlighted.
`data-unchecked`	Present when the menu checkbox item is not checked.

Menu.CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-unchecked`	Present when the menu checkbox item is not checked.

Menu.Group

Groups related menu items with the corresponding label. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Menu.GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Menu.Item

An individual interactive item in the menu. Renders a <div> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

onClick function —

Name: onClick
Description: The click handler for the menu item.
Type: ((event: MouseEvent) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the menu item is disabled.
`data-highlighted`	Present when the menu item is highlighted.

Menu.LinkItem

A link in the menu that can be used to navigate to a different page or section. Renders an <a> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the link is highlighted.

Menu.Popup

A container for the menu items. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu is closed.
`data-ending-style`	Present when the menu is animating out.
`data-open`	Present when the menu is open.
`data-orientation`	The orientation of the component.
`data-starting-style`	Present when the menu begins animating in.

Menu.Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Props

container HTMLElement | string | null —

Name: container
Description: A parent element to render the portal element into.
Type: HTMLElement | string | null

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Menu.Positioner

Positions the menu popup against the trigger. Renders a <div> element.

Props

side rId: 'bottom'

Name: side
Description: Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
Type: rId:
Default: 'bottom'

align etOpe 'center'

Name: align
Description: How to align the popup relative to the specified side.
Type: etOpe
Default: 'center'

sideOffset n, rea 0

Name: sideOffset
Description: Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.
Type: n, rea
Default: 0

alignOffset ason) 0

Name: alignOffset
Description: Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.
Type: ason)
Default: 0

collisionPadding boolean 5

Name: collisionPadding
Description: Additional space to maintain from the edge of the collision boundary.
Type: => boolean; }; export type MenuContex
Default: 5

collisionBoundary oolean; setOpe 'clipping-ancestors'

Name: collisionBoundary
Description: An element or a rectangle that delimits the area that the popup is confined to.
Type: oolean; setOpe
Default: 'clipping-ancestors'

collisionAvoidance OpenChangeReason) —

Name: collisionAvoidance
Description: Determines how to handle collisions when positioning the popup. side controls overflow on the preferred placement axis (top/bottom or left/right): 'flip': keep the requested side when it fits; otherwise try the opposite side
(top and bottom, or left and right).
'shift': never change side; keep the requested side and move the popup within the clipping boundary so it stays visible.
'none': do not correct side-axis overflow. align controls overflow on the alignment axis (start/center/end): 'flip': keep side, but swap start and end when the requested alignment overflows.
'shift': keep side and requested alignment, then nudge the popup along the alignment axis to fit.
'none': do not correct alignment-axis overflow. fallbackAxisSide controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: 'start': allow perpendicular fallback and try the logical start side first
(top before bottom, or left before right in LTR).
'end': allow perpendicular fallback and try the logical end side first
(bottom before top, or right before left in LTR).
'none': do not fallback to the perpendicular axis. When side is 'shift', explicitly setting align only supports 'shift' or 'none'.
If align is omitted, it defaults to 'flip'.
Type: OpenChangeReason)

arrowPadding overDe 5

Name: arrowPadding
Description: Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
Type: overDe
Default: 5

sticky OpenCha false

Name: sticky
Description: Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
Type: OpenCha
Default: false

positionMethod ver(): void; read 'absolute'

Name: positionMethod
Description: Maps to Floating UI strategy (absolute | fixed).
Type: ver(): void; read
Default: 'absolute'

strategy boolean —

Name: strategy
Description: —
Type: ed: boolean; read

anchor boolean —

Name: anchor
Description: Override the positioning anchor (element or virtual element).
Type: oopFocus: boolean; readonly me

disableAnchorTracking n | nul false

Name: disableAnchorTracking
Description: When true, skip continuous layout tracking of the anchor (position once; no resize/scroll auto-updates beyond the initial compute).
Type: n | nul
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu popup is closed.
`data-open`	Present when the menu popup is open.

Menu.RadioGroup

Groups related radio items. Renders a <div> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string | undefined

defaultValue string —

Name: defaultValue
Description: Uncontrolled initial value.
Type: string

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: string, event: Event) => void) | undefined

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ value: string }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.

Menu.RadioItem

A menu item that works like a radio button in a given group. Renders a <div> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ checked: boolean }]>

Data attributes

Attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-highlighted`	Present when the menu radio item is highlighted.
`data-unchecked`	Present when the menu radio item is not selected.

Menu.RadioItemIndicator

Indicates whether the radio item is selected. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-unchecked`	Present when the menu radio item is not selected.

Menu.Separator

A separator element accessible to screen readers. Renders a <div> element.

No component-specific props — HTML attributes and children only.

Menu.SubmenuRoot

Groups all parts of a submenu. Doesn't render its own HTML element.

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Menu.SubmenuTrigger

A menu item that opens a submenu. Renders a <div> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the submenu trigger is disabled.
`data-highlighted`	Present when the submenu trigger is highlighted.
`data-open`	Present when the part is open.

Menu.Trigger

A button that opens the menu. Renders a <button> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

id string —

Name: id
Description: —
Type: string | undefined

handle MenuHandle —

Name: handle
Description: Same handle as Root — enables triggers outside the Root tree.
Type: MenuHandle | undefined

payload unknown —

Name: payload
Description: Optional payload associated when opening via this trigger.
Type: unknown

openOnHover boolean —

Name: openOnHover
Description: Whether the menu should also open when the trigger is hovered.
Type: boolean

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

A viewport for displaying content transitions. This component is only required if one popup can be opened by multiple triggers, its content changes based on the trigger, and switching between them is animated. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet