Skip to main content

​
Overview

Navigation Menu provides a collection of links for navigating through your website. It features keyboard navigation, delayed interactions, and automatic viewport management for dropdown content.

​
Features

  • Full keyboard navigation with arrow keys
  • Automatic focus management
  • Flexible orientation (horizontal or vertical)
  • Configurable hover delay and skip delay durations
  • Animated content transitions with viewport
  • Optional indicators for active items
  • Screen reader friendly with proper ARIA attributes
  • Supports nested sub-menus

​
Installation

npm install @radix-ui/react-navigation-menu

​
Anatomy

import * as NavigationMenu from '@radix-ui/react-navigation-menu';

export default () => (
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item>
        <NavigationMenu.Trigger />
        <NavigationMenu.Content>
          <NavigationMenu.Link />
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item>
        <NavigationMenu.Link />
      </NavigationMenu.Item>

      <NavigationMenu.Indicator />
    </NavigationMenu.List>

    <NavigationMenu.Viewport />
  </NavigationMenu.Root>
);

​
API Reference

​
Root

The root component of the navigation menu.
​
value
string
The controlled value of the menu item to expand.
​
defaultValue
string
The value of the menu item to expand by default (uncontrolled).
​
onValueChange
(value: string) => void
Callback fired when the expanded item changes.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the menu.
​
dir
'ltr' | 'rtl'
The reading direction. If omitted, inherits from the parent.
​
delayDuration
number
default:"200"
The duration from when the pointer enters the trigger until the content opens (in milliseconds).
​
skipDelayDuration
number
default:"300"
How much time a user has to enter another trigger without incurring a delay again (in milliseconds).

​
List

Contains the navigation menu items and indicators.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Item

A top-level menu item, containing a trigger with content combination or a link.
​
value
string
A unique value that associates the item with a content.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Trigger

The button that toggles the content.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Content

Contains the content associated with a trigger.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Link

A navigational link.
​
active
boolean
Used to identify the link as the currently active page.
​
onSelect
(event: Event) => void
Callback fired when the link is selected.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Indicator

An optional animated indicator that highlights the currently active trigger.
​
forceMount
boolean
Used to force mounting when more control is needed.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Viewport

The viewport where expanded content is rendered. Automatically sizes itself to the content.
​
forceMount
boolean
Used to force mounting when more control is needed.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Sub

Signifies a submenu. Inherits context from the root.
​
value
string
A unique value that associates the item with a content.
​
defaultValue
string
The value of the menu item to expand by default.
​
onValueChange
(value: string) => void
Callback fired when the expanded item changes.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the submenu.

​
Example

import * as NavigationMenu from '@radix-ui/react-navigation-menu';
import './styles.css';

export default () => (
  <NavigationMenu.Root className="NavigationMenuRoot">
    <NavigationMenu.List className="NavigationMenuList">
      <NavigationMenu.Item>
        <NavigationMenu.Trigger className="NavigationMenuTrigger">
          Products
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className="NavigationMenuContent">
          <NavigationMenu.Link href="/product-1" className="NavigationMenuLink">
            Product 1
          </NavigationMenu.Link>
          <NavigationMenu.Link href="/product-2" className="NavigationMenuLink">
            Product 2
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item>
        <NavigationMenu.Link href="/about" className="NavigationMenuLink">
          About
        </NavigationMenu.Link>
      </NavigationMenu.Item>

      <NavigationMenu.Indicator className="NavigationMenuIndicator" />
    </NavigationMenu.List>

    <NavigationMenu.Viewport className="NavigationMenuViewport" />
  </NavigationMenu.Root>
);

​
Accessibility

Adheres to the Navigation WAI-ARIA design pattern.

​
Keyboard Interactions

  • Space/Enter - Opens/closes the content.
  • Tab - Moves focus to the next focusable element.
  • Shift + Tab - Moves focus to the previous focusable element.
  • ArrowDown - When horizontal, moves focus to the next trigger. When vertical, opens the content.
  • ArrowUp - When horizontal, moves focus to the previous trigger. When vertical, closes the content.
  • ArrowRight - When horizontal, opens the content. When vertical, moves focus to the next trigger.
  • ArrowLeft - When horizontal, closes the content. When vertical, moves focus to the previous trigger.
  • Home/End - Moves focus to the first/last trigger.

Build docs developers (and LLMs) love

Get started for freeTalk to us