0
# Radix UI Navigation Menu
1

2
Radix UI Navigation Menu is a comprehensive React component library that provides accessible, unstyled navigation menu primitives for building complex website navigation systems. It supports keyboard navigation, focus management, nested menus, and includes a full suite of composable components for creating sophisticated navigation experiences with complete design flexibility.
3

4
## Package Information
5

6
- **Package Name**: @radix-ui/react-navigation-menu
7
- **Package Type**: npm  
8
- **Language**: TypeScript
9
- **Installation**: `npm install @radix-ui/react-navigation-menu`
10

11
## Core Imports
12

13
```typescript
14
import {
15
  NavigationMenu,
16
  NavigationMenuSub,
17
  NavigationMenuList,
18
  NavigationMenuItem,
19
  NavigationMenuTrigger,
20
  NavigationMenuContent,
21
  NavigationMenuLink,
22
  NavigationMenuIndicator,
23
  NavigationMenuViewport,
24
  createNavigationMenuScope,
25
} from "@radix-ui/react-navigation-menu";
26
```
27

28
Alternative short aliases:
29

30
```typescript
31
import {
32
  Root,
33
  Sub,
34
  List,
35
  Item,
36
  Trigger,
37
  Content,
38
  Link,
39
  Indicator,
40
  Viewport,
41
} from "@radix-ui/react-navigation-menu";
42
```
43

44
**Alias Mappings:**
45
- `Root` → `NavigationMenu`
46
- `Sub` → `NavigationMenuSub`
47
- `List` → `NavigationMenuList`
48
- `Item` → `NavigationMenuItem`
49
- `Trigger` → `NavigationMenuTrigger`
50
- `Content` → `NavigationMenuContent`
51
- `Link` → `NavigationMenuLink`
52
- `Indicator` → `NavigationMenuIndicator`
53
- `Viewport` → `NavigationMenuViewport`
54

55
## Basic Usage
56

57
```typescript
58
import React from "react";
59
import {
60
  NavigationMenu,
61
  NavigationMenuList,
62
  NavigationMenuItem,
63
  NavigationMenuTrigger,
64
  NavigationMenuContent,
65
  NavigationMenuLink,
66
} from "@radix-ui/react-navigation-menu";
67

68
function NavExample() {
69
  return (
70
    <NavigationMenu>
71
      <NavigationMenuList>
72
        <NavigationMenuItem>
73
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
74
          <NavigationMenuContent>
75
            <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>
76
            <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>
77
          </NavigationMenuContent>
78
        </NavigationMenuItem>
79
        
80
        <NavigationMenuItem>
81
          <NavigationMenuLink href="/about">About</NavigationMenuLink>
82
        </NavigationMenuItem>
83
      </NavigationMenuList>
84
    </NavigationMenu>
85
  );
86
}
87
```
88

89
## Architecture
90

91
The Navigation Menu is built around a hierarchical component system:
92

93
- **Root Container**: `NavigationMenu` manages global state, timing, and coordination
94
- **List Structure**: `NavigationMenuList` provides the container for menu items
95
- **Item Management**: `NavigationMenuItem` wraps each menu item and manages trigger-content relationships
96
- **Interactive Elements**: `NavigationMenuTrigger` and `NavigationMenuLink` handle user interactions
97
- **Content Display**: `NavigationMenuContent` provides dismissable content panels
98
- **Visual Feedback**: `NavigationMenuIndicator` shows active states
99
- **Viewport Mode**: `NavigationMenuViewport` enables centralized content rendering
100
- **Focus Management**: Built-in keyboard navigation and accessibility features
101
- **State Management**: Controlled/uncontrolled modes with event callbacks
102

103
## Capabilities
104

105
### Core Navigation Components
106

107
Essential components for building navigation menu structures with proper hierarchy and state management.
108

109
```typescript { .api }
110
const NavigationMenu: React.ForwardRefExoticComponent<
111
  NavigationMenuProps & React.RefAttributes<HTMLElement>
112
>;
113

114
const NavigationMenuList: React.ForwardRefExoticComponent<
115
  NavigationMenuListProps & React.RefAttributes<HTMLUListElement>
116
>;
117

118
const NavigationMenuItem: React.ForwardRefExoticComponent<
119
  NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>
120
>;
121
```
122

123
[Core Components](./core-components.md)
124

125
### Interactive Elements
126

127
Trigger and link components that handle user interactions with keyboard and pointer support.
128

129
```typescript { .api }
130
const NavigationMenuTrigger: React.ForwardRefExoticComponent<
131
  NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>
132
>;
133

134
const NavigationMenuLink: React.ForwardRefExoticComponent<
135
  NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>
136
>;
137
```
138

139
[Interactive Elements](./interactive-elements.md)
140

141
### Content Management
142

143
Content and viewport components for displaying menu content with animation support and focus management.
144

145
```typescript { .api }
146
const NavigationMenuContent: React.ForwardRefExoticComponent<
147
  NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>
148
>;
149

150
const NavigationMenuViewport: React.ForwardRefExoticComponent<
151
  NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>
152
>;
153
```
154

155
[Content Management](./content-management.md)
156

157
### Visual Indicators and Sub-menus
158

159
Indicator component for visual feedback and sub-menu support for nested navigation structures.
160

161
```typescript { .api }
162
const NavigationMenuIndicator: React.ForwardRefExoticComponent<
163
  NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>
164
>;
165

166
const NavigationMenuSub: React.ForwardRefExoticComponent<
167
  NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>
168
>;
169
```
170

171
[Visual Indicators and Sub-menus](./indicators-submenus.md)
172

173
### Utility Functions
174

175
Scope creation utility for isolated navigation menu contexts.
176

177
```typescript { .api }
178
function createNavigationMenuScope(): {
179
  NavigationMenuProvider: React.Provider<any>;
180
  useNavigationMenuContext: () => any;
181
};
182
```
183

184
[Utility Functions](./utility-functions.md)
185

186
## Types
187

188
### Base Props Types
189

190
```typescript { .api }
191
interface NavigationMenuProps extends React.ComponentPropsWithoutRef<"nav"> {
192
  value?: string;
193
  defaultValue?: string;
194
  onValueChange?: (value: string) => void;
195
  dir?: "ltr" | "rtl";
196
  orientation?: "horizontal" | "vertical";
197
  /**
198
   * The duration from when the pointer enters the trigger until the tooltip gets opened.
199
   * @defaultValue 200
200
   */
201
  delayDuration?: number;
202
  /**
203
   * How much time a user has to enter another trigger without incurring a delay again.
204
   * @defaultValue 300
205
   */
206
  skipDelayDuration?: number;
207
}
208

209
interface NavigationMenuListProps 
210
  extends React.ComponentPropsWithoutRef<"ul"> {}
211

212
interface NavigationMenuItemProps 
213
  extends React.ComponentPropsWithoutRef<"li"> {
214
  value?: string;
215
}
216

217
interface NavigationMenuTriggerProps 
218
  extends React.ComponentPropsWithoutRef<"button"> {}
219

220
interface NavigationMenuLinkProps 
221
  extends Omit<React.ComponentPropsWithoutRef<"a">, "onSelect"> {
222
  active?: boolean;
223
  onSelect?: (event: Event) => void;
224
}
225
```
226

227
### Advanced Props Types
228

229
```typescript { .api }
230
interface NavigationMenuContentProps 
231
  extends React.ComponentPropsWithoutRef<"div"> {
232
  forceMount?: true;
233
}
234

235
interface NavigationMenuIndicatorProps 
236
  extends React.ComponentPropsWithoutRef<"div"> {
237
  forceMount?: true;
238
}
239

240
interface NavigationMenuViewportProps 
241
  extends React.ComponentPropsWithoutRef<"div"> {
242
  forceMount?: true;
243
}
244

245
interface NavigationMenuSubProps 
246
  extends React.ComponentPropsWithoutRef<"div"> {
247
  value?: string;
248
  defaultValue?: string;
249
  onValueChange?: (value: string) => void;
250
  orientation?: "horizontal" | "vertical";
251
}
252
```
253

254
## Data Attributes
255

256
All navigation menu components expose data attributes for styling and state indication:
257

258
```css
259
/* NavigationMenu */
260
[data-orientation="horizontal"] { /* horizontal layout */ }
261
[data-orientation="vertical"] { /* vertical layout */ }
262

263
/* NavigationMenuTrigger */
264
[data-state="open"] { /* trigger is active/open */ }
265
[data-state="closed"] { /* trigger is inactive/closed */ }
266
[data-disabled] { /* trigger is disabled */ }
267

268
/* NavigationMenuContent */
269
[data-state="open"] { /* content is visible */ }
270
[data-state="closed"] { /* content is hidden */ }
271
[data-motion="from-start"] { /* content animating from start */ }
272
[data-motion="from-end"] { /* content animating from end */ }
273
[data-motion="to-start"] { /* content animating to start */ }
274
[data-motion="to-end"] { /* content animating to end */ }
275
[data-orientation="horizontal"|"vertical"] { /* content orientation */ }
276

277
/* NavigationMenuIndicator */
278
[data-state="visible"] { /* indicator is shown */ }
279
[data-state="hidden"] { /* indicator is hidden */ }
280
[data-orientation="horizontal"|"vertical"] { /* indicator orientation */ }
281

282
/* NavigationMenuViewport */
283
[data-state="open"] { /* viewport has content */ }
284
[data-state="closed"] { /* viewport is empty */ }
285
[data-orientation="horizontal"|"vertical"] { /* viewport orientation */ }
286

287
/* NavigationMenuLink */
288
[data-active] { /* link represents current page */ }
289
```