Components

Navigation Menu

A horizontal list of links and dropdowns for primary site navigation, built on Radix with full keyboard and pointer support.

Basic usage

Pair a NavigationMenuTrigger with NavigationMenuContent to reveal a dropdown panel of links. Hover or focus the trigger to open it.

Simple links

For top-level links without a dropdown, render a NavigationMenuLink styled with navigationMenuTriggerStyle() so it matches the trigger height and padding.

Inline content

Pass viewport={false} on the root to drop the shared floating viewport and render each panel inline, directly beneath its own item.

Props

PropTypeDefaultDescription
viewportbooleantrueWhen true, dropdown content renders in a single shared floating viewport positioned below the menu. Set to false to render content inline under its own item.
valuestring—Controlled value of the currently open menu item (NavigationMenu).
defaultValuestring—Value of the item open by default in uncontrolled mode (NavigationMenu).
onValueChange(value: string) => void—Called when the open item changes (NavigationMenu).
delayDurationnumber200Milliseconds a pointer must rest on a trigger before its content opens (NavigationMenu).
activebooleanfalseMarks a NavigationMenuLink as the current page, styling it as active.
hrefstring—Destination URL for a NavigationMenuLink.
classNamestring—Additional Tailwind classes merged onto any part.

Accessibility

  • Built on Radix Navigation Menu, which exposes the menu with the correct ARIA roles and manages aria-expanded on each trigger automatically.
  • Full keyboard support: Tab moves between items, arrow keys move within an open panel, and Esc closes the active dropdown.
  • Triggers and links render a focus-visible ring using the brand gold token, visible on keyboard navigation and hidden on pointer interaction.
  • Set active on the NavigationMenuLink for the current page so assistive tech and active styling reflect the user's location.