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

Extends div HTML attributes.

Property	Type	Default	Description
`open`	`boolean \| undefined`	`—`	Whether the component is open (controlled).
`defaultOpen`	`boolean`	`—`	Whether the component is initially open (uncontrolled).
`onOpenChange`	`((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined`	`—`	Event handler called when the open state changes.
`openOnHover`	`boolean`	`—`	Open the menu when the pointer enters the trigger.
`delay`	`number`	`—`	Open delay when `openOnHover` is set (ms).
`closeDelay`	`number`	`—`	Close delay when leaving trigger/popup under hover (ms).
`children`	`Snippet<[{ open: boolean }]>`	`—`	Content rendered inside the part.

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

Menu.Arrow

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

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

Menu.Backdrop

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`dismissible`	`boolean`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

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

Menu.CheckboxItem

Extends div HTML attributes.

Property	Type	Default	Description
`checked`	`boolean \| undefined`	`—`	Controlled checked state.
`defaultChecked`	`boolean`	`—`	Uncontrolled initial checked state.
`onCheckedChange`	`((checked: boolean, event: Event) => void) \| undefined`	`—`	Event handler called when the checked state changes.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet<[{ checked: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.
`data-unchecked`	Present when the part is unchecked.

Menu.CheckboxItemIndicator

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-unchecked`	Present when the part is unchecked.

Menu.Group

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Menu.GroupLabel

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Menu.Item

Extends div HTML attributes.

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`onClick`	`((event: MouseEvent) => void) \| undefined`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.

Menu.LinkItem

Extends anchor HTML attributes.

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.

Menu.Popup

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-ending-style`	Present while the exit animation can run.
`data-open`	Present when the part is open.
`data-starting-style`	Present while the enter animation can run.

Menu.Portal

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Menu.Positioner

Extends div HTML attributes.

Property	Type	Default	Description
`side`	`Side`	`—`	—
`align`	`Align`	`—`	—
`sideOffset`	`number`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

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

Menu.RadioGroup

Extends div HTML attributes.

Property	Type	Default	Description
`value`	`string \| undefined`	`—`	Controlled value.
`defaultValue`	`string`	`—`	Uncontrolled initial value.
`onValueChange`	`((value: string, event: Event) => void) \| undefined`	`—`	Event handler called when the value changes.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet<[{ value: string }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.

Menu.RadioItem

Extends div HTML attributes.

Property	Type	Default	Description
`value`	`string`	`—`	Controlled value.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet<[{ checked: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.
`data-unchecked`	Present when the part is unchecked.

Menu.RadioItemIndicator

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-unchecked`	Present when the part is unchecked.

Menu.Separator

Extends div HTML attributes.

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

Menu.SubmenuRoot

Extends div HTML attributes.

Property	Type	Default	Description
`open`	`boolean \| undefined`	`—`	Whether the component is open (controlled).
`defaultOpen`	`boolean`	`—`	Whether the component is initially open (uncontrolled).
`onOpenChange`	`((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined`	`—`	Event handler called when the open state changes.
`children`	`Snippet<[{ open: boolean }]>`	`—`	Content rendered inside the part.

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

Menu.SubmenuTrigger

Extends div HTML attributes.

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.
`data-open`	Present when the part is open.

Menu.Trigger

Extends button HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`openOnHover`	`boolean`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

Data 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.

Menu.Viewport

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.