0
# Navigation Components
1

2
Navigation elements including app bars, drawers, menus, tabs, and breadcrumbs for application structure.
3

4
## Capabilities
5

6
### AppBar
7

8
Application bar component for navigation and branding, typically positioned at the top of the application.
9

10
```typescript { .api }
11
/**
12
 * Application bar for navigation and branding
13
 * @param props - AppBar configuration
14
 * @returns AppBar component
15
 */
16
function AppBar(props: AppBarProps): JSX.Element;
17

18
interface AppBarProps extends CommonProps {
19
  /** The positioning type */
20
  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
21
  /** The color of the component */
22
  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent';
23
  /** If true, the color prop is applied in dark mode */
24
  enableColorOnDark?: boolean;
25
  /** The component used for the root node */
26
  component?: React.ElementType;
27
  children?: React.ReactNode;
28
}
29
```
30

31
### Toolbar
32

33
Flexible toolbar component, often used within AppBar for organizing navigation elements.
34

35
```typescript { .api }
36
/**
37
 * Flexible toolbar component
38
 * @param props - Toolbar configuration
39
 * @returns Toolbar component
40
 */
41
function Toolbar(props: ToolbarProps): JSX.Element;
42

43
interface ToolbarProps extends CommonProps {
44
  /** The variant to use */
45
  variant?: 'regular' | 'dense';
46
  /** If true, the left and right padding is removed */
47
  disableGutters?: boolean;
48
  /** The component used for the root node */
49
  component?: React.ElementType;
50
  children?: React.ReactNode;
51
}
52
```
53

54
**Usage Examples:**
55

56
```typescript
57
import { AppBar, Toolbar, Typography, Button, IconButton } from "@mui/material";
58
import MenuIcon from "@mui/icons-material/Menu";
59

60
// Basic app bar
61
<AppBar position="static">
62
  <Toolbar>
63
    <IconButton edge="start" color="inherit" aria-label="menu">
64
      <MenuIcon />
65
    </IconButton>
66
    <Typography variant="h6" sx={{ flexGrow: 1 }}>
67
      My Application
68
    </Typography>
69
    <Button color="inherit">Login</Button>
70
  </Toolbar>
71
</AppBar>
72

73
// Fixed app bar with elevation
74
<AppBar position="fixed" elevation={4}>
75
  <Toolbar>
76
    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
77
      Fixed Header
78
    </Typography>
79
  </Toolbar>
80
</AppBar>
81
```
82

83
### Drawer
84

85
Navigation drawer panel that slides in from the side of the screen.
86

87
```typescript { .api }
88
/**
89
 * Navigation drawer panel
90
 * @param props - Drawer configuration
91
 * @returns Drawer component
92
 */
93
function Drawer(props: DrawerProps): JSX.Element;
94

95
interface DrawerProps extends CommonProps {
96
  /** Side from which the drawer will appear */
97
  anchor?: 'left' | 'top' | 'right' | 'bottom';
98
  /** If true, the drawer is open */
99
  open?: boolean;
100
  /** The variant to use */
101
  variant?: 'permanent' | 'persistent' | 'temporary';
102
  /** Callback fired when the component requests to be closed */
103
  onClose?: (event: React.SyntheticEvent) => void;
104
  /** Props applied to the Modal element */
105
  ModalProps?: Partial<ModalProps>;
106
  /** Props applied to the Paper element */
107
  PaperProps?: Partial<PaperProps>;
108
  /** Props applied to the Slide transition element */
109
  SlideProps?: Partial<SlideProps>;
110
  children?: React.ReactNode;
111
}
112
```
113

114
**Usage Examples:**
115

116
```typescript
117
import { Drawer, List, ListItem, ListItemText, Divider } from "@mui/material";
118

119
// Temporary drawer
120
<Drawer
121
  anchor="left"
122
  open={drawerOpen}
123
  onClose={handleDrawerClose}
124
>
125
  <List>
126
    <ListItem button>
127
      <ListItemText primary="Home" />
128
    </ListItem>
129
    <ListItem button>
130
      <ListItemText primary="About" />
131
    </ListItem>
132
    <Divider />
133
    <ListItem button>
134
      <ListItemText primary="Contact" />
135
    </ListItem>
136
  </List>
137
</Drawer>
138

139
// Permanent drawer
140
<Drawer
141
  variant="permanent"
142
  sx={{
143
    width: 240,
144
    flexShrink: 0,
145
    '& .MuiDrawer-paper': {
146
      width: 240,
147
      boxSizing: 'border-box',
148
    },
149
  }}
150
>
151
  <Toolbar />
152
  <List>
153
    <ListItem button>
154
      <ListItemText primary="Dashboard" />
155
    </ListItem>
156
    <ListItem button>
157
      <ListItemText primary="Settings" />
158
    </ListItem>
159
  </List>
160
</Drawer>
161
```
162

163
### Tabs
164

165
Tab navigation component for organizing content into separate views.
166

167
```typescript { .api }
168
/**
169
 * Tab navigation component
170
 * @param props - Tabs configuration
171
 * @returns Tabs component
172
 */
173
function Tabs(props: TabsProps): JSX.Element;
174

175
/**
176
 * Individual tab component
177
 * @param props - Tab configuration
178
 * @returns Tab component
179
 */
180
function Tab(props: TabProps): JSX.Element;
181

182
interface TabsProps extends CommonProps {
183
  /** Callback fired when the value changes */
184
  onChange?: (event: React.SyntheticEvent, value: any) => void;
185
  /** The value of the currently selected Tab */
186
  value?: any;
187
  /** The tabs orientation */
188
  orientation?: 'horizontal' | 'vertical';
189
  /** The component orientation */
190
  variant?: 'standard' | 'scrollable' | 'fullWidth';
191
  /** Determines the color of the indicator */
192
  indicatorColor?: 'primary' | 'secondary';
193
  /** Determines the color of the Tab */
194
  textColor?: 'primary' | 'secondary' | 'inherit';
195
  /** If true, the tabs are centered */
196
  centered?: boolean;
197
  /** Determine behavior of scroll buttons when tabs are set to scroll */
198
  scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
199
  /** If true, the scrollbar is visible */
200
  visibleScrollbar?: boolean;
201
  /** If true, keyboard focus will wrap around */
202
  allowScrollButtonsMobile?: boolean;
203
  children?: React.ReactNode;
204
}
205

206
interface TabProps extends CommonProps {
207
  /** The label element */
208
  label?: React.ReactNode;
209
  /** The icon element */
210
  icon?: React.ReactNode;
211
  /** The position of the icon relative to the label */
212
  iconPosition?: 'start' | 'end' | 'top' | 'bottom';
213
  /** If true, the tab is disabled */
214
  disabled?: boolean;
215
  /** You can wrap a string in an object with the 'wrapped' property to make the Tab fit */
216
  wrapped?: boolean;
217
  /** The value to associate with the tab */
218
  value?: any;
219
  /** Tab index value */
220
  tabIndex?: number;
221
  /** If true, the ripple effect is disabled */
222
  disableRipple?: boolean;
223
  /** If true, the focus ripple is disabled */
224
  disableFocusRipple?: boolean;
225
  /** The component used for the root node */
226
  component?: React.ElementType;
227
}
228
```
229

230
**Usage Examples:**
231

232
```typescript
233
import { Tabs, Tab, TabPanel, Box } from "@mui/material";
234

235
function TabPanel({ children, value, index, ...other }: TabPanelProps) {
236
  return (
237
    <div
238
      role="tabpanel"
239
      hidden={value !== index}
240
      id={`tabpanel-${index}`}
241
      aria-labelledby={`tab-${index}`}
242
      {...other}
243
    >
244
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
245
    </div>
246
  );
247
}
248

249
// Basic tabs
250
<Box sx={{ width: '100%' }}>
251
  <Tabs value={tabValue} onChange={handleTabChange}>
252
    <Tab label="Overview" />
253
    <Tab label="Details" />
254
    <Tab label="Settings" />
255
  </Tabs>
256
  
257
  <TabPanel value={tabValue} index={0}>
258
    Overview content
259
  </TabPanel>
260
  <TabPanel value={tabValue} index={1}>
261
    Details content
262
  </TabPanel>
263
  <TabPanel value={tabValue} index={2}>
264
    Settings content
265
  </TabPanel>
266
</Box>
267

268
// Tabs with icons
269
<Tabs value={tabValue} onChange={handleTabChange}>
270
  <Tab icon={<HomeIcon />} label="Home" />
271
  <Tab icon={<FavoriteIcon />} label="Favorites" />
272
  <Tab icon={<PersonIcon />} label="Profile" />
273
</Tabs>
274
```
275

276
### Menu
277

278
Menu component for displaying a list of choices to the user.
279

280
```typescript { .api }
281
/**
282
 * Menu component for displaying choices
283
 * @param props - Menu configuration
284
 * @returns Menu component
285
 */
286
function Menu(props: MenuProps): JSX.Element;
287

288
/**
289
 * Individual menu item
290
 * @param props - MenuItem configuration
291
 * @returns MenuItem component
292
 */
293
function MenuItem(props: MenuItemProps): JSX.Element;
294

295
interface MenuProps extends CommonProps {
296
  /** An HTML element, or a function that returns one */
297
  anchorEl?: null | Element | ((element: Element) => Element);
298
  /** The anchor reference type */
299
  anchorReference?: 'anchorEl' | 'anchorPosition' | 'none';
300
  /** The anchor position */
301
  anchorPosition?: { top?: number; left?: number };
302
  /** This is the point on the anchor where the popover's anchorEl will attach to */
303
  anchorOrigin?: PopoverOrigin;
304
  /** If true, the menu will be focused on open */
305
  autoFocus?: boolean;
306
  /** Menu contents, normally MenuItems */
307
  children?: React.ReactNode;
308
  /** Props applied to the MenuList element */
309
  MenuListProps?: Partial<MenuListProps>;
310
  /** Callback fired when the component requests to be closed */
311
  onClose?: (event: React.SyntheticEvent) => void;
312
  /** If true, the menu is visible */
313
  open: boolean;
314
  /** This is the point on the popover which will attach to the anchor's origin */
315
  transformOrigin?: PopoverOrigin;
316
  /** The variant to use */
317
  variant?: 'menu' | 'selectedMenu';
318
}
319

320
interface MenuItemProps extends CommonProps {
321
  /** If true, the menu item will be auto-focused when the menu opens */
322
  autoFocus?: boolean;
323
  /** The component used for the root node */
324
  component?: React.ElementType;
325
  /** If true, compact vertical padding designed for keyboard and mouse input is used */
326
  dense?: boolean;
327
  /** If true, the left and right padding is removed */
328
  disableGutters?: boolean;
329
  /** If true, the menu item is disabled */
330
  disabled?: boolean;
331
  /** If true, a 1px light border is added to the bottom of the menu item */
332
  divider?: boolean;
333
  /** This prop can help identify which element has keyboard focus */
334
  focusVisibleClassName?: string;
335
  /** If true, the menu item is selected */
336
  selected?: boolean;
337
  children?: React.ReactNode;
338
}
339
```
340

341
**Usage Examples:**
342

343
```typescript
344
import { Menu, MenuItem, IconButton } from "@mui/material";
345
import MoreVertIcon from "@mui/icons-material/MoreVert";
346

347
function DropdownMenu() {
348
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
349
  const open = Boolean(anchorEl);
350

351
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
352
    setAnchorEl(event.currentTarget);
353
  };
354

355
  const handleClose = () => {
356
    setAnchorEl(null);
357
  };
358

359
  return (
360
    <>
361
      <IconButton onClick={handleClick}>
362
        <MoreVertIcon />
363
      </IconButton>
364
      <Menu
365
        anchorEl={anchorEl}
366
        open={open}
367
        onClose={handleClose}
368
        anchorOrigin={{
369
          vertical: 'bottom',
370
          horizontal: 'right',
371
        }}
372
        transformOrigin={{
373
          vertical: 'top',
374
          horizontal: 'right',
375
        }}
376
      >
377
        <MenuItem onClick={handleClose}>Profile</MenuItem>
378
        <MenuItem onClick={handleClose}>Settings</MenuItem>
379
        <MenuItem onClick={handleClose}>Logout</MenuItem>
380
      </Menu>
381
    </>
382
  );
383
}
384
```
385

386
### Breadcrumbs
387

388
Navigation breadcrumbs component showing the current page's location within a hierarchy.
389

390
```typescript { .api }
391
/**
392
 * Navigation breadcrumbs component
393
 * @param props - Breadcrumbs configuration
394
 * @returns Breadcrumbs component
395
 */
396
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
397

398
interface BreadcrumbsProps extends CommonProps {
399
  /** The breadcrumb children */
400
  children?: React.ReactNode;
401
  /** Custom separator for the breadcrumbs */
402
  separator?: React.ReactNode;
403
  /** Specifies the maximum number of breadcrumbs to display */
404
  maxItems?: number;
405
  /** The number of items to show before the ellipsis */
406
  itemsBeforeCollapse?: number;
407
  /** The number of items to show after the ellipsis */
408
  itemsAfterCollapse?: number;
409
  /** Override the default label for the expand button */
410
  expandText?: string;
411
}
412
```
413

414
**Usage Examples:**
415

416
```typescript
417
import { Breadcrumbs, Link, Typography } from "@mui/material";
418
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
419

420
// Basic breadcrumbs
421
<Breadcrumbs aria-label="breadcrumb">
422
  <Link color="inherit" href="/">
423
    Home
424
  </Link>
425
  <Link color="inherit" href="/products">
426
    Products
427
  </Link>
428
  <Typography color="text.primary">Electronics</Typography>
429
</Breadcrumbs>
430

431
// Custom separator
432
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
433
  <Link color="inherit" href="/">
434
    Home
435
  </Link>
436
  <Link color="inherit" href="/category">
437
    Category
438
  </Link>
439
  <Typography color="text.primary">Current Page</Typography>
440
</Breadcrumbs>
441
```
442

443
### Stepper
444

445
Multi-step navigation components for wizards and process flows.
446

447
```typescript { .api }
448
/**
449
 * Container for step navigation
450
 * @param props - Stepper configuration
451
 * @returns Stepper component
452
 */
453
function Stepper(props: StepperProps): JSX.Element;
454

455
/**
456
 * Individual step in a stepper
457
 * @param props - Step configuration
458
 * @returns Step component
459
 */
460
function Step(props: StepProps): JSX.Element;
461

462
/**
463
 * Label and optional icon for a step
464
 * @param props - StepLabel configuration
465
 * @returns StepLabel component
466
 */
467
function StepLabel(props: StepLabelProps): JSX.Element;
468

469
/**
470
 * Content area for a step
471
 * @param props - StepContent configuration
472
 * @returns StepContent component
473
 */
474
function StepContent(props: StepContentProps): JSX.Element;
475

476
interface StepperProps extends CommonProps {
477
  /** Set the active step (zero based index) */
478
  activeStep?: number;
479
  /** If set to 'true' and orientation is horizontal, the linear stepper will allow the user to navigate between steps in any order */
480
  nonLinear?: boolean;
481
  /** The component orientation */
482
  orientation?: 'horizontal' | 'vertical';
483
  children?: React.ReactNode;
484
}
485

486
interface StepProps extends CommonProps {
487
  /** Sets the step as active */
488
  active?: boolean;
489
  /** Mark the step as completed */
490
  completed?: boolean;
491
  /** If true, the step is disabled */
492
  disabled?: boolean;
493
  /** The optional node to display */
494
  optional?: React.ReactNode;
495
  children?: React.ReactNode;
496
}
497

498
interface StepLabelProps extends CommonProps {
499
  /** In most cases will simply be a string containing a title for the label */
500
  children?: React.ReactNode;
501
  /** The props used for the error icon */
502
  error?: boolean;
503
  /** Override the default label of the step icon */
504
  icon?: React.ReactNode;
505
  /** The optional node to display */
506
  optional?: React.ReactNode;
507
  /** The component to render in place of the StepIcon */
508
  StepIconComponent?: React.ElementType;
509
  /** Props applied to the StepIcon element */
510
  StepIconProps?: object;
511
}
512

513
interface StepContentProps extends CommonProps {
514
  /** The content of the component */
515
  children?: React.ReactNode;
516
  /** The component used for the transition */
517
  TransitionComponent?: React.ComponentType<any>;
518
  /** Props applied to the transition element */
519
  TransitionProps?: object;
520
}
521
```
522

523
### MobileStepper
524

525
Compact stepper designed for mobile interfaces.
526

527
```typescript { .api }
528
/**
529
 * Compact stepper for mobile interfaces
530
 * @param props - MobileStepper configuration
531
 * @returns MobileStepper component
532
 */
533
function MobileStepper(props: MobileStepperProps): JSX.Element;
534

535
interface MobileStepperProps extends CommonProps {
536
  /** Set the active step (zero based index) */
537
  activeStep: number;
538
  /** A back button element */
539
  backButton: React.ReactNode;
540
  /** A next button element */
541
  nextButton: React.ReactNode;
542
  /** The total steps */
543
  steps: number;
544
  /** The variant to use */
545
  variant?: 'text' | 'dots' | 'progress';
546
  /** Props applied to the LinearProgress element */
547
  LinearProgressProps?: object;
548
  /** The positioning type */
549
  position?: 'bottom' | 'static' | 'top';
550
}
551
```
552

553
### Pagination
554

555
Pagination component for navigating through multiple pages of content.
556

557
```typescript { .api }
558
/**
559
 * Pagination component for page navigation
560
 * @param props - Pagination configuration
561
 * @returns Pagination component
562
 */
563
function Pagination(props: PaginationProps): JSX.Element;
564

565
/**
566
 * Individual pagination item
567
 * @param props - PaginationItem configuration
568
 * @returns PaginationItem component
569
 */
570
function PaginationItem(props: PaginationItemProps): JSX.Element;
571

572
interface PaginationProps extends CommonProps {
573
  /** Number of always visible pages at the beginning and end */
574
  boundaryCount?: number;
575
  /** The active page */
576
  page?: number;
577
  /** The total number of pages */
578
  count?: number;
579
  /** The default page selected */
580
  defaultPage?: number;
581
  /** If true, the component is disabled */
582
  disabled?: boolean;
583
  /** If true, hide the next-page button */
584
  hideNextButton?: boolean;
585
  /** If true, hide the previous-page button */
586
  hidePrevButton?: boolean;
587
  /** Callback fired when the page is changed */
588
  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
589
  /** Render the item */
590
  renderItem?: (item: PaginationRenderItemParams) => React.ReactNode;
591
  /** The shape of the pagination items */
592
  shape?: 'circular' | 'rounded';
593
  /** Number of always visible pages before and after the current page */
594
  siblingCount?: number;
595
  /** The size of the component */
596
  size?: 'small' | 'medium' | 'large';
597
  /** The variant to use */
598
  variant?: 'outlined' | 'text';
599
}
600

601
interface PaginationItemProps extends CommonProps {
602
  /** The current page number */
603
  page?: number;
604
  /** If true, the item is selected */
605
  selected?: boolean;
606
  /** The shape of the pagination item */
607
  shape?: 'circular' | 'rounded';
608
  /** The size of the component */
609
  size?: 'small' | 'medium' | 'large';
610
  /** The type of pagination item */
611
  type?: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis';
612
  /** The variant to use */
613
  variant?: 'outlined' | 'text';
614
}
615
```
616

617
**Usage Examples:**
618

619
```typescript
620
import {
621
  Stepper,
622
  Step,
623
  StepLabel,
624
  StepContent,
625
  MobileStepper,
626
  Pagination,
627
  Button,
628
  Typography,
629
  Box
630
} from "@mui/material";
631
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
632
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
633

634
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
635

636
// Horizontal stepper
637
<Stepper activeStep={1}>
638
  {steps.map((label, index) => (
639
    <Step key={label}>
640
      <StepLabel>{label}</StepLabel>
641
    </Step>
642
  ))}
643
</Stepper>
644

645
// Vertical stepper with content
646
<Stepper orientation="vertical" activeStep={1}>
647
  {steps.map((label, index) => (
648
    <Step key={label}>
649
      <StepLabel>{label}</StepLabel>
650
      <StepContent>
651
        <Typography>Content for {label}</Typography>
652
        <Box sx={{ mb: 2 }}>
653
          <Button variant="contained" sx={{ mt: 1, mr: 1 }}>
654
            Continue
655
          </Button>
656
          <Button disabled={index === 0} sx={{ mt: 1, mr: 1 }}>
657
            Back
658
          </Button>
659
        </Box>
660
      </StepContent>
661
    </Step>
662
  ))}
663
</Stepper>
664

665
// Mobile stepper
666
<MobileStepper
667
  steps={6}
668
  position="static"
669
  activeStep={activeStep}
670
  nextButton={
671
    <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
672
      Next
673
      <KeyboardArrowRight />
674
    </Button>
675
  }
676
  backButton={
677
    <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
678
      <KeyboardArrowLeft />
679
      Back
680
    </Button>
681
  }
682
/>
683

684
// Pagination
685
<Pagination 
686
  count={10} 
687
  page={page} 
688
  onChange={handleChange} 
689
  color="primary" 
690
/>
691
```
692

693
## Navigation Layout Patterns
694

695
### App Shell with Navigation
696

697
```typescript
698
import {
699
  AppBar,
700
  Toolbar,
701
  Drawer,
702
  List,
703
  ListItem,
704
  ListItemIcon,
705
  ListItemText,
706
  Typography,
707
  IconButton,
708
  Box
709
} from "@mui/material";
710
import {
711
  Menu as MenuIcon,
712
  Home as HomeIcon,
713
  Settings as SettingsIcon,
714
  Person as PersonIcon
715
} from "@mui/icons-material";
716

717
const drawerWidth = 240;
718

719
function AppShell({ children }: { children: React.ReactNode }) {
720
  const [mobileOpen, setMobileOpen] = useState(false);
721

722
  const handleDrawerToggle = () => {
723
    setMobileOpen(!mobileOpen);
724
  };
725

726
  const drawer = (
727
    <Box>
728
      <Toolbar />
729
      <List>
730
        <ListItem button>
731
          <ListItemIcon>
732
            <HomeIcon />
733
          </ListItemIcon>
734
          <ListItemText primary="Home" />
735
        </ListItem>
736
        <ListItem button>
737
          <ListItemIcon>
738
            <PersonIcon />
739
          </ListItemIcon>
740
          <ListItemText primary="Profile" />
741
        </ListItem>
742
        <ListItem button>
743
          <ListItemIcon>
744
            <SettingsIcon />
745
          </ListItemIcon>
746
          <ListItemText primary="Settings" />
747
        </ListItem>
748
      </List>
749
    </Box>
750
  );
751

752
  return (
753
    <Box sx={{ display: 'flex' }}>
754
      <AppBar
755
        position="fixed"
756
        sx={{
757
          width: { sm: `calc(100% - ${drawerWidth}px)` },
758
          ml: { sm: `${drawerWidth}px` },
759
        }}
760
      >
761
        <Toolbar>
762
          <IconButton
763
            color="inherit"
764
            aria-label="open drawer"
765
            edge="start"
766
            onClick={handleDrawerToggle}
767
            sx={{ mr: 2, display: { sm: 'none' } }}
768
          >
769
            <MenuIcon />
770
          </IconButton>
771
          <Typography variant="h6" noWrap component="div">
772
            My Application
773
          </Typography>
774
        </Toolbar>
775
      </AppBar>
776

777
      <Box
778
        component="nav"
779
        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
780
      >
781
        <Drawer
782
          variant="temporary"
783
          open={mobileOpen}
784
          onClose={handleDrawerToggle}
785
          ModalProps={{
786
            keepMounted: true, // Better open performance on mobile.
787
          }}
788
          sx={{
789
            display: { xs: 'block', sm: 'none' },
790
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
791
          }}
792
        >
793
          {drawer}
794
        </Drawer>
795
        <Drawer
796
          variant="permanent"
797
          sx={{
798
            display: { xs: 'none', sm: 'block' },
799
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
800
          }}
801
          open
802
        >
803
          {drawer}
804
        </Drawer>
805
      </Box>
806

807
      <Box
808
        component="main"
809
        sx={{
810
          flexGrow: 1,
811
          p: 3,
812
          width: { sm: `calc(100% - ${drawerWidth}px)` }
813
        }}
814
      >
815
        <Toolbar />
816
        {children}
817
      </Box>
818
    </Box>
819
  );
820
}
821
```
822

823
### Link
824

825
Component for navigation links with Material-UI styling and router integration.
826

827
```typescript { .api }
828
/**
829
 * Component for navigation links with Material-UI styling and router integration
830
 * @param props - Link configuration
831
 * @returns Link component
832
 */
833
function Link(props: LinkProps): JSX.Element;
834

835
interface LinkProps extends CommonProps {
836
  /** The color of the link */
837
  color?: 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
838
  /** Controls when the link should have an underline */
839
  underline?: 'none' | 'hover' | 'always';
840
  /** The variant to use */
841
  variant?: 'inherit' | 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'overline' | 'subtitle1' | 'subtitle2';
842
  /** The URL to link to */
843
  href?: string;
844
  /** The content of the link */
845
  children?: React.ReactNode;
846
  /** The component used for the root node */
847
  component?: React.ElementType;
848
  /** Callback fired when the link is clicked */
849
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
850
}
851
```
852

853
**Usage Examples:**
854

855
```typescript
856
import { Link, Typography } from "@mui/material";
857

858
// Basic link
859
<Link href="/about">About Us</Link>
860

861
// Link with different colors
862
<Link href="/contact" color="secondary">
863
  Contact
864
</Link>
865

866
// Link without underline
867
<Link href="/services" underline="none">
868
  Services
869
</Link>
870

871
// Link with typography variant
872
<Link href="/blog" variant="h6">
873
  Blog
874
</Link>
875

876
// Link as button component
877
<Link component="button" onClick={() => console.log('clicked')}>
878
  Click me
879
</Link>
880
```
881

882
### MenuList
883

884
Component for displaying a list of menu items with keyboard navigation.
885

886
```typescript { .api }
887
/**
888
 * Component for displaying a list of menu items with keyboard navigation
889
 * @param props - MenuList configuration
890
 * @returns MenuList component
891
 */
892
function MenuList(props: MenuListProps): JSX.Element;
893

894
interface MenuListProps extends CommonProps {
895
  /** If true, will focus the first item if autoFocus is true */
896
  autoFocus?: boolean;
897
  /** If true, will focus the first item */
898
  autoFocusItem?: boolean;
899
  /** If true, will not apply focus outline */
900
  disabledItemsFocusable?: boolean;
901
  /** If true, will disable list item focus on keyboard navigation */
902
  disableListWrap?: boolean;
903
  /** MenuList contents */
904
  children?: React.ReactNode;
905
  /** The variant to use */
906
  variant?: 'menu' | 'selectedMenu';
907
}
908
```
909

910
**Usage Examples:**
911

912
```typescript
913
import { MenuList, MenuItem, ListItemText, ListItemIcon, Divider } from "@mui/material";
914
import { Send, Drafts, Inbox } from "@mui/icons-material";
915

916
// Basic menu list
917
<MenuList>
918
  <MenuItem>
919
    <ListItemIcon>
920
      <Send fontSize="small" />
921
    </ListItemIcon>
922
    <ListItemText>Sent mail</ListItemText>
923
  </MenuItem>
924
  <MenuItem>
925
    <ListItemIcon>
926
      <Drafts fontSize="small" />
927
    </ListItemIcon>
928
    <ListItemText>Drafts</ListItemText>
929
  </MenuItem>
930
  <Divider />
931
  <MenuItem>
932
    <ListItemIcon>
933
      <Inbox fontSize="small" />
934
    </ListItemIcon>
935
    <ListItemText>Inbox</ListItemText>
936
  </MenuItem>
937
</MenuList>
938

939
// Menu list with auto focus
940
<MenuList autoFocusItem>
941
  <MenuItem>Profile</MenuItem>
942
  <MenuItem>My account</MenuItem>
943
  <MenuItem>Logout</MenuItem>
944
</MenuList>
945
```
946

947
### BottomNavigation
948

949
Navigation component for mobile interfaces with action buttons at the bottom.
950

951
```typescript { .api }
952
/**
953
 * Navigation component for mobile interfaces with action buttons at the bottom
954
 * @param props - BottomNavigation configuration
955
 * @returns BottomNavigation component
956
 */
957
function BottomNavigation(props: BottomNavigationProps): JSX.Element;
958

959
interface BottomNavigationProps extends CommonProps {
960
  /** Callback fired when the value changes */
961
  onChange?: (event: React.SyntheticEvent, value: any) => void;
962
  /** If true, all BottomNavigationActions will show their labels */
963
  showLabels?: boolean;
964
  /** The value of the currently selected BottomNavigationAction */
965
  value?: any;
966
  /** The content of the component */
967
  children?: React.ReactNode;
968
}
969
```
970

971
### BottomNavigationAction
972

973
Individual action component for BottomNavigation.
974

975
```typescript { .api }
976
/**
977
 * Individual action component for BottomNavigation
978
 * @param props - BottomNavigationAction configuration
979
 * @returns BottomNavigationAction component
980
 */
981
function BottomNavigationAction(props: BottomNavigationActionProps): JSX.Element;
982

983
interface BottomNavigationActionProps extends CommonProps {
984
  /** The icon to display */
985
  icon?: React.ReactNode;
986
  /** The label element */
987
  label?: React.ReactNode;
988
  /** If true, the BottomNavigationAction will show its label */
989
  showLabel?: boolean;
990
  /** You can provide your own value */
991
  value?: any;
992
}
993
```
994

995
**Usage Examples:**
996

997
```typescript
998
import { BottomNavigation, BottomNavigationAction } from "@mui/material";
999
import { Restore, Favorite, LocationOn } from "@mui/icons-material";
1000

1001
const [value, setValue] = React.useState(0);
1002

1003
<BottomNavigation
1004
  value={value}
1005
  onChange={(event, newValue) => {
1006
    setValue(newValue);
1007
  }}
1008
  showLabels
1009
>
1010
  <BottomNavigationAction label="Recents" icon={<Restore />} />
1011
  <BottomNavigationAction label="Favorites" icon={<Favorite />} />
1012
  <BottomNavigationAction label="Nearby" icon={<LocationOn />} />
1013
</BottomNavigation>
1014
```