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
Extends HTML element attributes.
| Property | Type | Default | Description |
|---|
value | string | null | undefined | — | Controlled value. |
defaultValue | string | null | — | Uncontrolled initial value. |
onValueChange | ((value: string | null) => void) | undefined | — | Event handler called when the value changes. |
orientation | NavigationMenuOrientation | 'horizontal' | — |
delay | number | — | — |
closeDelay | number | — | — |
children | Snippet<[{ value: string | null; 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. |
data-orientation | The orientation of the component. |
NavigationMenu.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. |
NavigationMenu.Backdrop
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-open | Present when the part is open. |
NavigationMenu.Content
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
NavigationMenu.Icon
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. |
NavigationMenu.Item
Extends HTML attributes for the rendered element.
| Property | Type | Default | Description |
|---|
value | string | — | Controlled value. |
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. |
NavigationMenu.Link
Extends anchor HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
NavigationMenu.List
Extends HTML attributes for the rendered element.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-orientation | The orientation of the component. |
NavigationMenu.Popup
Extends div 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-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. |
NavigationMenu.Portal
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
NavigationMenu.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. |
NavigationMenu.Trigger
Extends button 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-open | Present when the part is open. |
NavigationMenu.Viewport
Extends div 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. |