Reference
Navigation Menu
NavigationMenu, dressed in the paper-and-ink system: a menubar of ghost triggers with one sliding stroke of primary ink, opening the shared popup vessel. The parts — Root, List, Item, Trigger, Link, Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow.
Root · ViewportPositioner · Viewport · Trigger · Content · List · Item · Link · Indicator · ItemIndicator · Arrow
#Arrow
A styled part — no props of its own; it takes the anatomy's shared styling.
#Content
A styled part — no props of its own; it takes the anatomy's shared styling.
#Indicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#ItemIndicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#Item
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | Whether the item is disabled | |
value | string | The value of the item |
#Link
A styled part — no props of its own; it takes the anatomy's shared styling.
#List
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
closeDelay | number | 300 | The delay before the menu closes |
defaultValue | string | The default value of the navigation menu. Use when you don't want to control the value of the menu. | |
disableClickTrigger | boolean | Whether to disable the click trigger | |
disableHoverTrigger | boolean | Whether to disable the hover trigger | |
disablePointerLeaveClose | boolean | Whether to disable the pointer leave close | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; list: string; item: string; trigger: (value: string) => string; content: (value: string) => string; viewport: string; }> | The ids of the elements in the machine. | |
openDelay | number | 200 | The delay before the menu opens |
orientation | 'horizontal' | 'vertical' | "horizontal" | The orientation of the navigation menu |
translations | navigationMenu.IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states | |
value | string | The controlled value of the navigation menu |
| Event | Payload |
|---|---|
valueChange | details: ValueChangeDetails |
update:value | value: string |
#Trigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#ViewportPositioner
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | Placement of the viewport for css variables (--viewport-x, --viewport-y). @defaultValue 'center' |
#Viewport
A styled part — no props of its own; it takes the anatomy's shared styling.