0
# Navigation Components
1

2
Navigation components provide wayfinding and hierarchical organization including menus, tabs, steppers, and bottom navigation.
3

4
## Capabilities
5

6
### Menu
7

8
Contextual menu component that displays a list of choices on a temporary surface.
9

10
```typescript { .api }
11
/**
12
 * Contextual menu component that displays a list of choices on a temporary surface
13
 * @param props - Menu props
14
 * @returns Menu React component
15
 */
16
function Menu(props: MenuProps): JSX.Element;
17

18
interface MenuProps extends StandardProps<PopoverProps, MenuClassKey> {
19
  autoFocus?: boolean;
20
  children?: React.ReactNode;
21
  disableAutoFocusItem?: boolean;
22
  MenuListProps?: Partial<MenuListProps>;
23
  onClose?: PopoverProps['onClose'];
24
  open: boolean;
25
  PopoverClasses?: PopoverProps['classes'];
26
  transitionDuration?: TransitionProps['timeout'] | 'auto';
27
  variant?: 'menu' | 'selectedMenu';
28
}
29

30
type MenuClassKey = 'paper' | 'list';
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
import { Menu, MenuItem, IconButton } from '@material-ui/core';
37
import { MoreVert as MoreVertIcon } from '@material-ui/icons';
38

39
const [anchorEl, setAnchorEl] = useState(null);
40

41
<IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
42
  <MoreVertIcon />
43
</IconButton>
44
<Menu
45
  anchorEl={anchorEl}
46
  open={Boolean(anchorEl)}
47
  onClose={() => setAnchorEl(null)}
48
>
49
  <MenuItem onClick={() => setAnchorEl(null)}>Profile</MenuItem>
50
  <MenuItem onClick={() => setAnchorEl(null)}>My account</MenuItem>
51
  <MenuItem onClick={() => setAnchorEl(null)}>Logout</MenuItem>
52
</Menu>
53
```
54

55
### Menu Item
56

57
Individual item within a menu component.
58

59
```typescript { .api }
60
/**
61
 * Individual item within a menu component
62
 * @param props - Menu item props
63
 * @returns Menu item React component
64
 */
65
function MenuItem(props: MenuItemProps): JSX.Element;
66

67
interface MenuItemProps extends StandardProps<ListItemProps, MenuItemClassKey> {
68
  component?: React.ElementType;
69
  dense?: boolean;
70
  disableGutters?: boolean;
71
  divider?: boolean;
72
  selected?: boolean;
73
}
74

75
type MenuItemClassKey = 'root' | 'gutters' | 'selected' | 'dense';
76
```
77

78
### Menu List
79

80
Wrapper for menu items providing keyboard navigation.
81

82
```typescript { .api }
83
/**
84
 * Wrapper for menu items providing keyboard navigation
85
 * @param props - Menu list props
86
 * @returns Menu list React component
87
 */
88
function MenuList(props: MenuListProps): JSX.Element;
89

90
interface MenuListProps extends StandardProps<ListProps, MenuListClassKey> {
91
  autoFocus?: boolean;
92
  autoFocusItem?: boolean;
93
  children?: React.ReactNode;
94
  disabledItemsFocusable?: boolean;
95
  disableListWrap?: boolean;
96
  variant?: 'menu' | 'selectedMenu';
97
}
98

99
type MenuListClassKey = 'root' | 'dense';
100
```
101

102
### Tabs
103

104
Tab navigation component for organizing content into sections.
105

106
```typescript { .api }
107
/**
108
 * Tab navigation component for organizing content into sections
109
 * @param props - Tabs props
110
 * @returns Tabs React component
111
 */
112
function Tabs(props: TabsProps): JSX.Element;
113

114
interface TabsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TabsClassKey> {
115
  action?: (actions: TabsActions) => void;
116
  centered?: boolean;
117
  children?: React.ReactNode;
118
  component?: React.ElementType;
119
  indicatorColor?: 'secondary' | 'primary';
120
  onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
121
  orientation?: 'horizontal' | 'vertical';
122
  ScrollButtonComponent?: React.ComponentType<TabScrollButtonProps>;
123
  scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
124
  TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
125
  TabScrollButtonProps?: Partial<TabScrollButtonProps>;
126
  textColor?: 'secondary' | 'primary' | 'inherit';
127
  value?: any;
128
  variant?: 'standard' | 'scrollable' | 'fullWidth';
129
}
130

131
type TabsClassKey = 'root' | 'vertical' | 'flexContainer' | 'flexContainerVertical' | 'centered' | 'scroller' | 'fixed' | 'scrollable' | 'scrollButtons' | 'scrollButtonsDesktop' | 'indicator';
132

133
interface TabsActions {
134
  updateIndicator(): void;
135
}
136
```
137

138
**Usage Examples:**
139

140
```typescript
141
import { Tabs, Tab, AppBar } from '@material-ui/core';
142

143
const [value, setValue] = useState(0);
144

145
<AppBar position="static">
146
  <Tabs value={value} onChange={(e, newValue) => setValue(newValue)}>
147
    <Tab label="Item One" />
148
    <Tab label="Item Two" />
149
    <Tab label="Item Three" />
150
  </Tabs>
151
</AppBar>
152

153
// Vertical tabs
154
<Tabs
155
  orientation="vertical"
156
  variant="scrollable"
157
  value={value}
158
  onChange={(e, newValue) => setValue(newValue)}
159
>
160
  <Tab label="Item One" />
161
  <Tab label="Item Two" />
162
  <Tab label="Item Three" />
163
</Tabs>
164
```
165

166
### Tab
167

168
Individual tab component used within Tabs.
169

170
```typescript { .api }
171
/**
172
 * Individual tab component used within Tabs
173
 * @param props - Tab props
174
 * @returns Tab React component
175
 */
176
function Tab(props: TabProps): JSX.Element;
177

178
interface TabProps extends StandardProps<ButtonBaseProps, TabClassKey> {
179
  disabled?: boolean;
180
  fullWidth?: boolean;
181
  icon?: string | React.ReactElement;
182
  label?: React.ReactNode;
183
  value?: any;
184
  wrapped?: boolean;
185
}
186

187
type TabClassKey = 'root' | 'labelIcon' | 'textColorInherit' | 'textColorPrimary' | 'textColorSecondary' | 'selected' | 'disabled' | 'fullWidth' | 'wrapped' | 'wrapper';
188
```
189

190
### Stepper
191

192
Stepper component for displaying progress through numbered steps.
193

194
```typescript { .api }
195
/**
196
 * Stepper component for displaying progress through numbered steps
197
 * @param props - Stepper props
198
 * @returns Stepper React component
199
 */
200
function Stepper(props: StepperProps): JSX.Element;
201

202
interface StepperProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepperClassKey> {
203
  activeStep?: number;
204
  alternativeLabel?: boolean;
205
  children: React.ReactNode;
206
  connector?: React.ReactElement | null;
207
  nonLinear?: boolean;
208
  orientation?: 'horizontal' | 'vertical';
209
}
210

211
type StepperClassKey = 'root' | 'horizontal' | 'vertical' | 'alternativeLabel';
212
```
213

214
### Step
215

216
Individual step component within a stepper.
217

218
```typescript { .api }
219
/**
220
 * Individual step component within a stepper
221
 * @param props - Step props
222
 * @returns Step React component
223
 */
224
function Step(props: StepProps): JSX.Element;
225

226
interface StepProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepClassKey> {
227
  active?: boolean;
228
  children: React.ReactNode;
229
  completed?: boolean;
230
  disabled?: boolean;
231
  expanded?: boolean;
232
}
233

234
type StepClassKey = 'root' | 'horizontal' | 'vertical' | 'alternativeLabel' | 'completed';
235
```
236

237
### Step Label
238

239
Label component for steps displaying text and optional icons.
240

241
```typescript { .api }
242
/**
243
 * Label component for steps displaying text and optional icons
244
 * @param props - Step label props
245
 * @returns Step label React component
246
 */
247
function StepLabel(props: StepLabelProps): JSX.Element;
248

249
interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, StepLabelClassKey> {
250
  children?: React.ReactNode;
251
  disabled?: boolean;
252
  error?: boolean;
253
  icon?: React.ReactNode;
254
  optional?: React.ReactNode;
255
  StepIconComponent?: React.ComponentType<StepIconProps>;
256
  StepIconProps?: Partial<StepIconProps>;
257
}
258

259
type StepLabelClassKey = 'root' | 'horizontal' | 'vertical' | 'label' | 'active' | 'completed' | 'error' | 'disabled' | 'iconContainer' | 'alternativeLabel' | 'labelContainer';
260
```
261

262
### Step Icon
263

264
Icon component for steps showing step numbers or custom icons.
265

266
```typescript { .api }
267
/**
268
 * Icon component for steps showing step numbers or custom icons
269
 * @param props - Step icon props
270
 * @returns Step icon React component
271
 */
272
function StepIcon(props: StepIconProps): JSX.Element;
273

274
interface StepIconProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepIconClassKey> {
275
  active?: boolean;
276
  completed?: boolean;
277
  error?: boolean;
278
  icon: React.ReactNode;
279
}
280

281
type StepIconClassKey = 'root' | 'text' | 'active' | 'completed' | 'error';
282
```
283

284
### Step Button
285

286
Clickable step component for non-linear steppers.
287

288
```typescript { .api }
289
/**
290
 * Clickable step component for non-linear steppers
291
 * @param props - Step button props
292
 * @returns Step button React component
293
 */
294
function StepButton(props: StepButtonProps): JSX.Element;
295

296
interface StepButtonProps extends StandardProps<ButtonBaseProps, StepButtonClassKey> {
297
  active?: boolean;
298
  alternativeLabel?: boolean;
299
  children: React.ReactNode;
300
  completed?: boolean;
301
  disabled?: boolean;
302
  icon?: React.ReactNode;
303
  last?: boolean;
304
  optional?: React.ReactNode;
305
  orientation?: 'horizontal' | 'vertical';
306
}
307

308
type StepButtonClassKey = 'root' | 'horizontal' | 'vertical' | 'touchRipple';
309
```
310

311
### Step Content
312

313
Content area for vertical steppers.
314

315
```typescript { .api }
316
/**
317
 * Content area for vertical steppers
318
 * @param props - Step content props
319
 * @returns Step content React component
320
 */
321
function StepContent(props: StepContentProps): JSX.Element;
322

323
interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepContentClassKey> {
324
  children?: React.ReactNode;
325
  TransitionComponent?: React.ComponentType<TransitionProps>;
326
  transitionDuration?: TransitionProps['timeout'] | 'auto';
327
  TransitionProps?: TransitionProps;
328
}
329

330
type StepContentClassKey = 'root' | 'last' | 'transition';
331
```
332

333
### Step Connector
334

335
Connector component between steps in a stepper.
336

337
```typescript { .api }
338
/**
339
 * Connector component between steps in a stepper
340
 * @param props - Step connector props
341
 * @returns Step connector React component
342
 */
343
function StepConnector(props: StepConnectorProps): JSX.Element;
344

345
interface StepConnectorProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepConnectorClassKey> {}
346

347
type StepConnectorClassKey = 'root' | 'horizontal' | 'vertical' | 'alternativeLabel' | 'active' | 'completed' | 'disabled' | 'line' | 'lineHorizontal' | 'lineVertical';
348
```
349

350
### Mobile Stepper
351

352
Compact stepper designed for mobile interfaces.
353

354
```typescript { .api }
355
/**
356
 * Compact stepper designed for mobile interfaces
357
 * @param props - Mobile stepper props
358
 * @returns Mobile stepper React component
359
 */
360
function MobileStepper(props: MobileStepperProps): JSX.Element;
361

362
interface MobileStepperProps extends StandardProps<PaperProps, MobileStepperClassKey> {
363
  activeStep: number;
364
  backButton: React.ReactNode;
365
  LinearProgressProps?: Partial<LinearProgressProps>;
366
  nextButton: React.ReactNode;
367
  position?: 'bottom' | 'top' | 'static';
368
  steps: number;
369
  variant?: 'text' | 'dots' | 'progress';
370
}
371

372
type MobileStepperClassKey = 'root' | 'positionBottom' | 'positionTop' | 'positionStatic' | 'dots' | 'dot' | 'dotActive' | 'progress';
373
```
374

375
### Bottom Navigation
376

377
Bottom navigation bar for primary destinations in mobile apps.
378

379
```typescript { .api }
380
/**
381
 * Bottom navigation bar for primary destinations in mobile apps
382
 * @param props - Bottom navigation props
383
 * @returns Bottom navigation React component
384
 */
385
function BottomNavigation(props: BottomNavigationProps): JSX.Element;
386

387
interface BottomNavigationProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BottomNavigationClassKey> {
388
  children?: React.ReactNode;
389
  component?: React.ElementType;
390
  onChange?: (event: React.SyntheticEvent, value: any) => void;
391
  showLabels?: boolean;
392
  value?: any;
393
}
394

395
type BottomNavigationClassKey = 'root';
396
```
397

398
### Bottom Navigation Action
399

400
Individual action within bottom navigation.
401

402
```typescript { .api }
403
/**
404
 * Individual action within bottom navigation
405
 * @param props - Bottom navigation action props
406
 * @returns Bottom navigation action React component
407
 */
408
function BottomNavigationAction(props: BottomNavigationActionProps): JSX.Element;
409

410
interface BottomNavigationActionProps extends StandardProps<ButtonBaseProps, BottomNavigationActionClassKey> {
411
  icon?: React.ReactNode;
412
  label?: React.ReactNode;
413
  selected?: boolean;
414
  showLabel?: boolean;
415
  value?: any;
416
}
417

418
type BottomNavigationActionClassKey = 'root' | 'selected' | 'iconOnly' | 'wrapper' | 'label';
419
```
420

421
**Usage Examples:**
422

423
```typescript
424
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
425
import { Restore, Favorite, LocationOn } from '@material-ui/icons';
426

427
const [value, setValue] = useState(0);
428

429
<BottomNavigation
430
  value={value}
431
  onChange={(event, newValue) => setValue(newValue)}
432
  showLabels
433
>
434
  <BottomNavigationAction label="Recents" icon={<Restore />} />
435
  <BottomNavigationAction label="Favorites" icon={<Favorite />} />
436
  <BottomNavigationAction label="Nearby" icon={<LocationOn />} />
437
</BottomNavigation>
438
```
439

440
### Link
441

442
Navigation link component with Material-UI styling.
443

444
```typescript { .api }
445
/**
446
 * Navigation link component with Material-UI styling
447
 * @param props - Link props
448
 * @returns Link React component
449
 */
450
function Link(props: LinkProps): JSX.Element;
451

452
interface LinkProps extends StandardProps<LinkTypeMap['props'], LinkClassKey> {
453
  TypographyClasses?: TypographyProps['classes'];
454
  underline?: 'none' | 'hover' | 'always';
455
}
456

457
type LinkClassKey = 'root' | 'underlineNone' | 'underlineHover' | 'underlineAlways' | 'button' | 'focusVisible';
458

459
interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
460
  props: P & TypographyProps<D, { component?: D; underline?: 'none' | 'hover' | 'always' }>;
461
  defaultComponent: D;
462
  classKey: LinkClassKey;
463
}
464
```