Navigation Menu
The Navigation Menu component provides a menu of links optimized for navigating websites, ensuring easy access to various sections and pages. It enhances usability and user experience with flexible, customizable navigation options tailored to user needs.
Additional Examples
With Next/Link
When using the native Next.js <Link /> component, you can use navigationMenuTriggerStyle() to normalize the styles of the trigger.
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"<NavigationMenuItem>
<Link href="/docs" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Documentation
</NavigationMenuLink>
</Link>
</NavigationMenuItem>Note: When using client side routing in combination with Next.js, you can refer to the Radix Navigation Menu documentation for more information.
Configurable Props
<NavigationMenu>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultValue | string | The value of the menu that should be open when initially rendered. Use when you do not need to control the value state. | |
value | string | The controlled value of the menu to open. Should be used in conjunction with onValueChange. | |
onValueChange | function (open: string) => void | Event handler called when the value changes. | |
delayDuration | number | 200 | The duration from when the mouse enters a trigger until the content opens. |
skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. |
skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. |
<NavigationMenu>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultValue | string | The value of the menu that should be open when initially rendered. Use when you do not need to control the value state. | |
value | string | The controlled value of the menu to open. Should be used in conjunction with onValueChange. | |
onValueChange | function (open: string) => void | Event handler called when the value changes. | |
delayDuration | number | 200 | The duration from when the mouse enters a trigger until the content opens. |
skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. |
skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. |
<NavigationMenuContent>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
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. |
onEscapeKeyDown | function (event: KeyboardEvent) => void | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault | |
onPointerDownOutside | function (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 | function (event: FocusOutsideEvent) => void | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. | |
onInteractOutside | function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |