A collection of links for navigating websites.
NavigationMenu should not be confused with DropDownMenu or ContextMenu, although this primitive shares the name menu in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role. This is because menu and menubars behave like native operating system menus most commonly found in desktop application windows, as such they feature complex functionality like composite focus management and first-character navigation.
These features are often considered unnecessary for website navigation and at worst can confuse users who are familiar with established website patterns.
See the W3C Disclosure Navigation Menu example for more information.
| Prop | Type | Default |
|---|---|---|
| Space | When focus is on NavigationMenuTrigger, opens the content. | |
| Enter | When focus is on NavigationMenuTrigger, opens the content. | |
| ArrowDown | When horizontal and focus is on an open NavigationMenuTrigger, moves focus into NavigationMenuContent. Moves focus to the next NavigationMenuTrigger or NavigationMenuLink. | |
| ArrowUp | Moves focus to the previous NavigationMenu.Trigger or NavigationMenuLink. | |
| ArrowRight | When vertical and focus is on an open NavigationMenuTrigger, moves focus into its NavigationMenuContent. Moves focus to the next NavigationMenuTrigger or NavigationMenuLink. | |
| ArrowLeft | When vertical and focus is on an open NavigationMenuTrigger, moves focus into its NavigationMenuContent. Moves focus to the previous NavigationMenuTrigger or NavigationMenuLink. | |
| Home | Moves focus to the first NavigationMenuTrigger or NavigationMenuLink. | |
| End | Moves focus to the last NavigationMenuTrigger or NavigationMenuLink. | |
| Esc | Closes open NavigationMenuContent and moves focus to its NavigationMenuTrigger. |
Contains all the parts of a navigation menu.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | No default value | The default value of the menu. |
| value | string | No default value | The value of the menu. |
| onValueChange | function | No default value | The callback when the value changes. |
| delayDuration | number | 200 | The delay duration in milliseconds. |
| skipDelayDuration | number | 300 | The skip delay duration in milliseconds. |
| dir | enum: "ltr" | "rtl" | No default value | The direction of the menu. |
| orientation | enum: "horizontal" | "vertical" | "horizontal" | The orientation of the menu. |
<NavigationMenu> <NavigationMenuItem> <NavigationMenuLink href="https://www.google.com" target="_blank"> Google </NavigationMenuLink> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuTrigger className="group"> Learn <Icon name="chevron-down" className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" /> </NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink href="https://www.google.com" target="_blank"> Wow dude, amazing! </NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuTrigger className="group"> Overview <Icon name="chevron-down" className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" /> </NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink href="https://www.google.com" target="_blank"> AndreCasal is a boss </NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem>
<NavigationMenuIndicator className="top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease] data-[state=visible]:animate-in data-[state=hidden]:animate-out"> <div className="relative top-[60%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] border bg-background shadow-lg" /> </NavigationMenuIndicator></NavigationMenu>Here's the <NavigationMenu /> component in action.
import { forwardRef } from 'react'import { ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxProps } from 'react-aria-components'import { cn } from '#app/utils/tailwind-merge'
const NavigationMenu = forwardRef<HTMLDivElement, ListBoxProps<any>>(({ className, orientation = 'horizontal', ...props }, ref) => { return <ListBox ref={ref} renderEmptyState={() => 'Add items to the navigation menu.'} orientation={orientation} className={cn('navigation-menu', className)} {...props} />})NavigationMenu.displayName = 'NavigationMenu'
const NavigationMenuItem = forwardRef<HTMLDivElement, ListBoxItemProps>((props, ref) => <ListBoxItem ref={ref} {...props} />)NavigationMenuItem.displayName = 'NavigationMenuItem'
export { NavigationMenu, NavigationMenuItem }