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

NavigationMenu.Root

Groups all parts of the navigation menu. Renders a <nav> element at the root, or <div> element when nested.

Props

value string | null null

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

defaultValue string | null null

Name: defaultValue
Description: Uncontrolled initial value.
Type: string | null
Default: null

onValueChange function —

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

orientation NavigationMenuOrientation 'horizontal'

Name: orientation
Description: The orientation of the navigation menu.
Type: NavigationMenuOrientation
Default: 'horizontal'

delay number 50

Name: delay
Description: How long to wait before opening the navigation popup. Specified in milliseconds.
Type: number
Default: 50

closeDelay number 50

Name: closeDelay
Description: How long to wait before closing the navigation popup. Specified in milliseconds.
Type: number
Default: 50

children snippet —

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

Data attributes

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

NavigationMenu.Arrow

Displays an element pointing toward the navigation menu's current 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 popup is closed.
`data-open`	Present when the popup is open.

NavigationMenu.Backdrop

A backdrop for the navigation 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

children snippet —

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

Data attributes

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

NavigationMenu.Content

A container for the content of the navigation menu item that is moved into the popup when the item is active. Renders a <div> element.

Props

children snippet —

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

NavigationMenu.Icon

An icon that indicates that the trigger button opens a menu.

Props

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-open`	Present when the part is open.

NavigationMenu.Item

An individual navigation menu item. Renders a <li> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string

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.

NavigationMenu.Link

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

Props

children snippet —

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

NavigationMenu.List

Contains a list of navigation menu items. Renders a <ul> element.

Props

children snippet —

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

Data attributes

Attribute	Description
`data-orientation`	The orientation of the component.

NavigationMenu.Popup

A container for the navigation menu contents. Renders a <nav> element.

Props

children snippet —

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

Data attributes

Attribute	Description
`data-closed`	Present when the popup is closed.
`data-ending-style`	Present when the popup is animating out.
`data-open`	Present when the popup is open.
`data-starting-style`	Present when the popup begins animating in.

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

children snippet —

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

NavigationMenu.Positioner

Positions the navigation menu against the currently active trigger. Renders a <div> element.

Props

side re 'bottom'

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

align : Nav 'center'

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

sideOffset read 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: read
Default: 0

alignOffset ng; r 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: ng; r
Default: 0

collisionPadding string 5

Name: collisionPadding
Description: Additional space to maintain from the edge of the collision boundary.
Type: g; registerContent(itemValue: string,
Default: 5

collisionBoundary function 'clipping-ancestors'

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

collisionAvoidance snippet —

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: : Snippet | undefi

arrowPadding ger(it 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: ger(it
Default: 5

sticky ing, el false

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

positionMethod id; readonly open 'absolute'

Name: positionMethod
Description: Maps to Floating UI strategy (absolute | fixed).
Type: id; readonly open
Default: 'absolute'

strategy lay(): void; canc —

Name: strategy
Description: —
Type: lay(): void; canc

anchor boolean —

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

disableAnchorTracking e?: str 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: e?: str
Default: false

children snippet —

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

Data attributes

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

NavigationMenu.Trigger

Opens the navigation menu popup when hovered or clicked, revealing the associated content. Renders a <button> 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 part is disabled.
`data-open`	Present when the part is open.

NavigationMenu.Viewport

The clipping viewport of the navigation menu's current content. 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 part is closed.
`data-open`	Present when the part is open.