0
# Layout Components
1

2
Layout components provide the structural foundation for Material-UI applications, including responsive grids, app bars, surfaces, and containers.
3

4
## Capabilities
5

6
### App Bar
7

8
Top application bar component for navigation and branding.
9

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

18
interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
19
  color?: 'inherit' | 'primary' | 'secondary' | 'default';
20
  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
21
}
22

23
type AppBarClassKey = 'root' | 'positionFixed' | 'positionAbsolute' | 'positionSticky' | 'positionStatic' | 'positionRelative' | 'colorDefault' | 'colorPrimary' | 'colorSecondary';
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
30
import { Menu as MenuIcon } from '@material-ui/icons';
31

32
<AppBar position="static" color="primary">
33
  <Toolbar>
34
    <IconButton edge="start" color="inherit">
35
      <MenuIcon />
36
    </IconButton>
37
    <Typography variant="h6">
38
      My Application
39
    </Typography>
40
  </Toolbar>
41
</AppBar>
42
```
43

44
### Grid System
45

46
Responsive grid layout system based on CSS Flexbox.
47

48
```typescript { .api }
49
/**
50
 * Responsive grid layout system based on CSS Flexbox
51
 * @param props - Grid props
52
 * @returns Grid React component
53
 */
54
function Grid(props: GridProps): JSX.Element;
55

56
interface GridProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, GridClassKey> {
57
  alignContent?: GridContentAlignment;
58
  alignItems?: GridItemsAlignment;
59
  container?: boolean;
60
  direction?: GridDirection;
61
  item?: boolean;
62
  justify?: GridJustification;
63
  lg?: boolean | GridSize;
64
  md?: boolean | GridSize;
65
  sm?: boolean | GridSize;
66
  spacing?: GridSpacing;
67
  wrap?: GridWrap;
68
  xl?: boolean | GridSize;
69
  xs?: boolean | GridSize;
70
  zeroMinWidth?: boolean;
71
}
72

73
type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
74
type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
75
type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
76
type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
77
type GridContentAlignment = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
78
type GridJustification = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
79
type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
80
```
81

82
**Usage Examples:**
83

84
```typescript
85
import { Grid, Paper } from '@material-ui/core';
86

87
// Responsive grid layout
88
<Grid container spacing={3}>
89
  <Grid item xs={12} sm={6} md={4}>
90
    <Paper>Item 1</Paper>
91
  </Grid>
92
  <Grid item xs={12} sm={6} md={4}>
93
    <Paper>Item 2</Paper>
94
  </Grid>
95
  <Grid item xs={12} sm={6} md={4}>
96
    <Paper>Item 3</Paper>
97
  </Grid>
98
</Grid>
99

100
// Centered layout
101
<Grid container justify="center" alignItems="center" style={{ minHeight: '100vh' }}>
102
  <Grid item xs={12} sm={8} md={6}>
103
    <Paper>Centered content</Paper>
104
  </Grid>
105
</Grid>
106
```
107

108
### Paper
109

110
Material Design surface component with elevation.
111

112
```typescript { .api }
113
/**
114
 * Material Design surface component with elevation
115
 * @param props - Paper props
116
 * @returns Paper React component
117
 */
118
function Paper(props: PaperProps): JSX.Element;
119

120
interface PaperProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, PaperClassKey> {
121
  component?: React.ElementType;
122
  elevation?: number;
123
  square?: boolean;
124
}
125

126
type PaperClassKey = 'root' | 'rounded' | 'elevation0' | 'elevation1' | 'elevation2' | 'elevation3' | 'elevation4' | 'elevation5' | 'elevation6' | 'elevation7' | 'elevation8' | 'elevation9' | 'elevation10' | 'elevation11' | 'elevation12' | 'elevation13' | 'elevation14' | 'elevation15' | 'elevation16' | 'elevation17' | 'elevation18' | 'elevation19' | 'elevation20' | 'elevation21' | 'elevation22' | 'elevation23' | 'elevation24';
127
```
128

129
### Toolbar
130

131
Container component for app bar content and actions.
132

133
```typescript { .api }
134
/**
135
 * Container component for app bar content and actions
136
 * @param props - Toolbar props
137
 * @returns Toolbar React component
138
 */
139
function Toolbar(props: ToolbarProps): JSX.Element;
140

141
interface ToolbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ToolbarClassKey> {
142
  disableGutters?: boolean;
143
  variant?: 'regular' | 'dense';
144
}
145

146
type ToolbarClassKey = 'root' | 'gutters' | 'regular' | 'dense';
147
```
148

149
### Grid List
150

151
Component for displaying collections of images in a tiled grid layout.
152

153
```typescript { .api }
154
/**
155
 * Component for displaying collections of images in a tiled grid layout
156
 * @param props - Grid list props
157
 * @returns Grid list React component
158
 */
159
function GridList(props: GridListProps): JSX.Element;
160

161
interface GridListProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>, GridListClassKey> {
162
  cellHeight?: number | 'auto';
163
  cols?: number;
164
  component?: React.ElementType;
165
  spacing?: number;
166
}
167

168
type GridListClassKey = 'root';
169
```
170

171
### Grid List Tile
172

173
Individual tile within a grid list.
174

175
```typescript { .api }
176
/**
177
 * Individual tile within a grid list
178
 * @param props - Grid list tile props
179
 * @returns Grid list tile React component
180
 */
181
function GridListTile(props: GridListTileProps): JSX.Element;
182

183
interface GridListTileProps extends StandardProps<React.HTMLAttributes<HTMLLIElement>, GridListTileClassKey> {
184
  cols?: number;
185
  component?: React.ElementType;
186
  rows?: number;
187
}
188

189
type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
190
```
191

192
### Grid List Tile Bar
193

194
Bar component for displaying metadata over grid list tiles.
195

196
```typescript { .api }
197
/**
198
 * Bar component for displaying metadata over grid list tiles
199
 * @param props - Grid list tile bar props
200
 * @returns Grid list tile bar React component
201
 */
202
function GridListTileBar(props: GridListTileBarProps): JSX.Element;
203

204
interface GridListTileBarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, GridListTileBarClassKey> {
205
  actionIcon?: React.ReactNode;
206
  actionPosition?: 'left' | 'right';
207
  subtitle?: React.ReactNode;
208
  title?: React.ReactNode;
209
  titlePosition?: 'top' | 'bottom';
210
}
211

212
type GridListTileBarClassKey = 'root' | 'titlePositionBottom' | 'titlePositionTop' | 'rootSubtitle' | 'titleWrap' | 'titleWrapActionPosLeft' | 'titleWrapActionPosRight' | 'title' | 'subtitle' | 'actionIcon' | 'actionIconActionPosLeft';
213
```
214

215
### Hidden
216

217
Responsive utility component for hiding content at specific breakpoints.
218

219
```typescript { .api }
220
/**
221
 * Responsive utility component for hiding content at specific breakpoints
222
 * @param props - Hidden props
223
 * @returns Hidden React component or null
224
 */
225
function Hidden(props: HiddenProps): JSX.Element | null;
226

227
interface HiddenProps {
228
  children: React.ReactNode;
229
  implementation?: 'js' | 'css';
230
  initialWidth?: Breakpoint;
231
  lgDown?: boolean;
232
  lgUp?: boolean;
233
  mdDown?: boolean;
234
  mdUp?: boolean;
235
  only?: Breakpoint | Breakpoint[];
236
  smDown?: boolean;
237
  smUp?: boolean;
238
  xlDown?: boolean;
239
  xlUp?: boolean;
240
  xsDown?: boolean;
241
  xsUp?: boolean;
242
}
243
```
244

245
**Usage Examples:**
246

247
```typescript
248
import { Hidden, Typography } from '@material-ui/core';
249

250
// Hide on mobile screens
251
<Hidden xsDown>
252
  <Typography>This content is hidden on mobile</Typography>
253
</Hidden>
254

255
// Show only on desktop
256
<Hidden mdDown>
257
  <Typography>Desktop only content</Typography>
258
</Hidden>
259

260
// Hide on specific breakpoint
261
<Hidden only={['sm', 'md']}>
262
  <Typography>Hidden on small and medium screens</Typography>
263
</Hidden>
264
```
265

266
### Drawer
267

268
Navigation drawer component for side navigation.
269

270
```typescript { .api }
271
/**
272
 * Navigation drawer component for side navigation
273
 * @param props - Drawer props
274
 * @returns Drawer React component
275
 */
276
function Drawer(props: DrawerProps): JSX.Element;
277

278
interface DrawerProps extends StandardProps<ModalProps, DrawerClassKey> {
279
  anchor?: 'left' | 'top' | 'right' | 'bottom';
280
  children?: React.ReactNode;
281
  elevation?: number;
282
  ModalProps?: Partial<ModalProps>;
283
  onClose?: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void;
284
  open?: boolean;
285
  PaperProps?: Partial<PaperProps>;
286
  SlideProps?: Partial<SlideProps>;
287
  transitionDuration?: TransitionProps['timeout'];
288
  variant?: 'permanent' | 'persistent' | 'temporary';
289
}
290

291
type DrawerClassKey = 'root' | 'docked' | 'paper' | 'paperAnchorLeft' | 'paperAnchorRight' | 'paperAnchorTop' | 'paperAnchorBottom' | 'paperAnchorDockedLeft' | 'paperAnchorDockedTop' | 'paperAnchorDockedRight' | 'paperAnchorDockedBottom' | 'modal';
292
```
293

294
### Swipeable Drawer
295

296
Enhanced drawer with swipe gesture support for mobile devices.
297

298
```typescript { .api }
299
/**
300
 * Enhanced drawer with swipe gesture support for mobile devices
301
 * @param props - Swipeable drawer props
302
 * @returns Swipeable drawer React component
303
 */
304
function SwipeableDrawer(props: SwipeableDrawerProps): JSX.Element;
305

306
interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
307
  disableBackdropTransition?: boolean;
308
  disableDiscovery?: boolean;
309
  disableSwipeToOpen?: boolean;
310
  hysteresis?: number;
311
  minFlingVelocity?: number;
312
  onClose: (event: React.SyntheticEvent<{}>) => void;
313
  onOpen: (event: React.SyntheticEvent<{}>) => void;
314
  open: boolean;
315
  SwipeAreaProps?: object;
316
  swipeAreaWidth?: number;
317
}
318
```