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'

NavigationMenu.Sub

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'

NavigationMenu.List

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'

NavigationMenu.Item

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.

NavigationMenu.Trigger

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

NavigationMenu.Content

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'

NavigationMenu.Link

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

NavigationMenu.Indicator

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'

NavigationMenu.Viewport

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'

NavigationMenu

Props

NavigationMenu

NavigationMenu.Sub

NavigationMenu.List

NavigationMenu.Item

NavigationMenu.Trigger

NavigationMenu.Content

NavigationMenu.Link

NavigationMenu.Indicator

NavigationMenu.Viewport