0
# Tab Navigation
1

2
Enhanced tab functionality with context-based coordination, automatic ARIA attribute management, and seamless integration with Material-UI's tab system.
3

4
## Capabilities
5

6
### TabContext
7

8
Context provider component that coordinates tab state and provides ARIA accessibility IDs for Tab and TabPanel components.
9

10
```typescript { .api }
11
/**
12
 * Context provider for tab coordination and accessibility
13
 * @param props - Component props including value and children
14
 * @returns Context provider component
15
 */
16
function TabContext(props: TabContextProps): JSX.Element;
17

18
interface TabContextProps {
19
  /** Child components, typically TabList and TabPanel elements */
20
  children?: React.ReactNode;
21
  /** Currently selected tab value - must match Tab and TabPanel value props */
22
  value: string | number;
23
}
24
```
25

26
**Usage Example:**
27

28
```typescript
29
import React from 'react';
30
import { TabContext, TabList, TabPanel } from '@mui/lab';
31
import { Tab } from '@mui/material';
32

33
function MyTabs() {
34
  const [value, setValue] = React.useState('1');
35

36
  return (
37
    <TabContext value={value}>
38
      <TabList onChange={(event, newValue) => setValue(newValue)}>
39
        <Tab label="Tab 1" value="1" />
40
        <Tab label="Tab 2" value="2" />
41
      </TabList>
42
      <TabPanel value="1">Panel 1 Content</TabPanel>
43
      <TabPanel value="2">Panel 2 Content</TabPanel>
44
    </TabContext>
45
  );
46
}
47
```
48

49
### TabList
50

51
Enhanced Tabs component that automatically handles ARIA attributes and integrates with TabContext for coordinated tab management.
52

53
```typescript { .api }
54
/**
55
 * Enhanced Tabs component with automatic ARIA management
56
 * @param props - Extended Material-UI Tabs props
57
 * @returns Enhanced tabs component
58
 */
59
function TabList(props: TabListProps): JSX.Element;
60

61
interface TabListProps extends Omit<TabsProps, 'children' | 'value'> {
62
  /** List of Tab components */
63
  children?: React.ReactNode;
64
}
65

66
// Inherited from Material-UI TabsProps
67
interface TabsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
68
  /** Callback fired when tab is changed */
69
  onChange?: (event: React.SyntheticEvent, value: any) => void;
70
  /** Orientation of the tabs */
71
  orientation?: 'horizontal' | 'vertical';
72
  /** Determines how scrollable tabs should be handled */
73
  scrollButtons?: 'auto' | false | true;
74
  /** Tab selection indicator style */
75
  indicatorColor?: 'primary' | 'secondary';
76
  /** Tab text color */
77
  textColor?: 'inherit' | 'primary' | 'secondary';
78
  /** Tab variant style */
79
  variant?: 'standard' | 'scrollable' | 'fullWidth';
80
  /** Allow scroll on the left side */
81
  allowScrollButtonsMobile?: boolean;
82
  /** Component for the scroll buttons */
83
  ScrollButtonComponent?: React.ElementType;
84
  /** Properties applied to the scroll buttons */
85
  scrollButtonsHideMobile?: boolean;
86
}
87
```
88

89
**Usage Example:**
90

91
```typescript
92
import { TabContext, TabList } from '@mui/lab';
93
import { Tab, Box } from '@mui/material';
94

95
function VerticalTabs() {
96
  const [value, setValue] = React.useState('1');
97

98
  return (
99
    <TabContext value={value}>
100
      <Box sx={{ flexGrow: 1, display: 'flex' }}>
101
        <TabList 
102
          orientation="vertical"
103
          onChange={(event, newValue) => setValue(newValue)}
104
          sx={{ borderRight: 1, borderColor: 'divider' }}
105
        >
106
          <Tab label="Item One" value="1" />
107
          <Tab label="Item Two" value="2" />
108
          <Tab label="Item Three" value="3" />
109
        </TabList>
110
        {/* TabPanels would go here */}
111
      </Box>
112
    </TabContext>
113
  );
114
}
115
```
116

117
### TabPanel
118

119
Content container component for tab panels with conditional rendering and accessibility support.
120

121
```typescript { .api }
122
/**
123
 * Content container for individual tab panels
124
 * @param props - Component props with value matching
125
 * @returns Tab panel content container
126
 */
127
function TabPanel(props: TabPanelProps): JSX.Element;
128

129
interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
130
  /** Content to display when this panel is active */
131
  children?: React.ReactNode;
132
  /** CSS classes for styling customization */
133
  classes?: Partial<TabPanelClasses>;
134
  /** System prop for styling */
135
  sx?: SxProps<Theme>;
136
  /** Value that must match TabContext value to show this panel */
137
  value: string | number;
138
  /** Keep panel content mounted in DOM when not active (default: false) */
139
  keepMounted?: boolean;
140
}
141

142
interface TabPanelClasses {
143
  /** Class applied to the root element */
144
  root: string;
145
}
146
```
147

148
**Usage Example:**
149

150
```typescript
151
import { TabContext, TabList, TabPanel } from '@mui/lab';
152
import { Tab, Typography } from '@mui/material';
153

154
function TabsWithContent() {
155
  const [value, setValue] = React.useState('1');
156

157
  return (
158
    <TabContext value={value}>
159
      <TabList onChange={(event, newValue) => setValue(newValue)}>
160
        <Tab label="Overview" value="1" />
161
        <Tab label="Details" value="2" />
162
      </TabList>
163
      
164
      <TabPanel value="1" keepMounted={false}>
165
        <Typography>Overview content goes here</Typography>
166
      </TabPanel>
167
      
168
      <TabPanel value="2" sx={{ padding: 2 }}>
169
        <Typography>Detailed information content</Typography>
170
      </TabPanel>
171
    </TabContext>
172
  );
173
}
174
```
175

176
### Tab Context Hook
177

178
Hook for consuming tab context within nested components.
179

180
```typescript { .api }
181
/**
182
 * Hook to consume TabContext within components
183
 * @returns Tab context value or null if outside provider
184
 */
185
function useTabContext(): TabContextValue | null;
186

187
interface TabContextValue {
188
  /** ID prefix for generating ARIA IDs */
189
  idPrefix: string;
190
  /** Current tab value */
191
  value: string;
192
}
193
```
194

195
### Utility Functions
196

197
Helper functions for generating consistent ARIA IDs.
198

199
```typescript { .api }
200
/**
201
 * Generate ARIA ID for tab panel
202
 * @param context - Tab context value
203
 * @param tabValue - Value of the tab
204
 * @returns Generated panel ID
205
 */
206
function getPanelId(context: TabContextValue, tabValue: string): string;
207

208
/**
209
 * Generate ARIA ID for tab
210
 * @param context - Tab context value  
211
 * @param tabValue - Value of the tab
212
 * @returns Generated tab ID
213
 */
214
function getTabId(context: TabContextValue, tabValue: string): string;
215
```
216

217
## CSS Classes
218

219
```typescript { .api }
220
// Available CSS classes for TabPanel
221
const tabPanelClasses: {
222
  root: string;
223
};
224
```