A collection of links for navigating websites.
| Name | Type | Default | Description |
|---|
| defaultValue | string | - | The value of the menu item that should be active when initially rendered. Use when you do not need to control the value state. |
| value | string | - | The controlled value of the menu item to activate. Should be used in conjunction with `onValueChange`. |
| onValueChange | (value: string) => void | - | Event handler called when the value changes. |
| delayDuration | number | 200 | The duration from when the pointer enters the trigger until the tooltip gets opened. |
| skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. |
Data attributes
| Data attribute | Values |
|---|
| [data-orientation] | 'vertical' | 'horizontal' |
Signifies a submenu. Use it in place of the root part when nested to create a submenu.
| Name | Type | Default | Description |
|---|
| disabled | string | - | When `true`, prevents the user from interacting with the item. |
| value | string | - | A unique value for the item. |
| onValueChange | string | (value: string) => void | Event handler called when the value changes. |
| orientation | string | 'horizontal' | The orientation of the menu. |
Data attributes
| Data attribute | Values |
|---|
| [data-orientation] | 'vertical' | 'horizontal' |
Signifies a submenu. Use it in place of the root part when nested to create a submenu.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Data attributes
| Data attribute | Values |
|---|
| [data-orientation] | 'vertical' | 'horizontal' |
A top level menu item, contains a link or trigger with content combination.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| value | string | - | A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled. |
The button that toggles the content.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| value | string | - | A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled. |
Data attributes
| Data attribute | Values |
|---|
| [data-state] | 'open' | 'closed' |
| [data-disabled] | Present when disabled |
The button that toggles the content.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| disableOutsidePointerEvents | boolean | false | When `true`, hover/focus/click interactions will be disabled on elements outside the bounds of the component. Users will need to click twice on outside elements to interact with them: Once to close the navigation menu, and again to activate the element. |
| forceMount | boolean | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
Events
| Name | Type | Default | Description |
|---|
| onEscapeKeyDown | (event: KeyboardEvent) => void | - | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | (event: PointerDownOutsideEvent) => void | - | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| onFocusOutside | (event: FocusOutsideEvent) => void | - | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| onInteractOutside | (event: React.FocusEvent | MouseEvent | TouchEvent) => void | - | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
Data attributes
| Data attribute | Values |
|---|
| [data-state] | 'open' | 'closed' |
| [data-motion] | 'to-start' | 'to-end' | 'from-start' | 'from-end' |
| [data-orientation] | 'vertical' | 'horizontal' |
A navigational link.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| active | boolean | false | Used to identify the link as the currently active page. |
Events
| Name | Type | Default | Description |
|---|
| onSelect | (event: KeyboardEvent) => void | - | Event handler called when the user selects a link (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the navigation menu from closing when selecting that link. |
Data attributes
| Data attribute | Values |
|---|
| [data-active] | Present when active |
An optional indicator element that renders below the list, is used to highlight the currently active trigger.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| forceMount | boolean | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
Data attributes
| Data attribute | Values |
|---|
| [data-state] | 'visible' | 'hidden' |
| [data-orientation] | 'visible' | 'hidden' |
An optional viewport element that is used to render active content outside of the list.
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| forceMount | boolean | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
Data attributes
| Data attribute | Values |
|---|
| [data-state] | 'visible' | 'hidden' |
| [data-orientation] | 'visible' | 'hidden' |