Navigation Menu

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.

string

The controlled value of the menu item to expand.

string

The value of the menu item to expand by default (uncontrolled).

(value: string) => void

Callback fired when the expanded item changes.

'horizontal' | 'vertical'

default:"'horizontal'"

The orientation of the menu.

'ltr' | 'rtl'

The reading direction. If omitted, inherits from the parent.

number

default:"200"

The duration from when the pointer enters the trigger until the content opens (in milliseconds).

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.

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.

string

A unique value that associates the item with a content.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Trigger

The button that toggles the content.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Content

Contains the content associated with a trigger.

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Link

A navigational link.

boolean

Used to identify the link as the currently active page.

(event: Event) => void

Callback fired when the link is selected.

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.

boolean

Used to force mounting when more control is needed.

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.

boolean

Used to force mounting when more control is needed.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Sub

Signifies a submenu. Inherits context from the root.

string

A unique value that associates the item with a content.

string

The value of the menu item to expand by default.

(value: string) => void

Callback fired when the expanded item changes.

'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>
);

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

export default () => {
  const [value, setValue] = useState('');

  return (
    <NavigationMenu.Root value={value} onValueChange={setValue}>
      <NavigationMenu.List>
        <NavigationMenu.Item value="products">
          <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="/product-1">Product 1</NavigationMenu.Link>
            <NavigationMenu.Link href="/product-2">Product 2</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Viewport />
    </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.

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

List

Item

Trigger

Content

Link

Indicator

Viewport

Sub

Example

Accessibility

Keyboard Interactions

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​List

​Item

​Trigger

​Content

​Link

​Indicator

​Viewport

​Sub

​Example

​Accessibility

​Keyboard Interactions

Overview

Features

Installation

Anatomy

API Reference

Root

List

Item

Trigger

Content

Link

Indicator

Viewport

Sub

Example

Accessibility

Keyboard Interactions