---
productId: material-ui
title: React Drawer component
components: Drawer, SwipeableDrawer
githubLabel: 'scope: drawer'
materialDesign: https://m2.material.io/components/navigation-drawer
githubSource: packages/mui-material/src/Drawer
---
# Drawer
The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or app functionality such as switching accounts.
A navigation drawer can either be permanently on-screen or controlled by a navigation menu icon.
[Side sheets](https://m2.material.io/components/sheets-side) are supplementary surfaces primarily used on tablet and desktop.
## Temporary drawer
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
The Drawer can be cancelled by clicking the overlay or pressing the Esc key.
It closes when an item is selected, handled by controlling the `open` prop.
```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
export default function TemporaryDrawer() {
const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
const DrawerList = (
);
return (
);
}
```
### Anchor
Use the `anchor` prop to specify which side of the screen the Drawer should originate from.
The default value is `left`.
```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
type Anchor = 'top' | 'left' | 'bottom' | 'right';
export default function AnchorTemporaryDrawer() {
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer =
(anchor: Anchor, open: boolean) =>
(event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor: Anchor) => (
);
return (
{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
))}
);
}
```
### Swipeable
You can make the drawer swipeable with the `SwipeableDrawer` component.
This component comes with a 2 kB gzipped payload overhead.
Some low-end mobile devices won't be able to follow the fingers at 60 FPS.
You can use the `disableBackdropTransition` prop to help.
```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
type Anchor = 'top' | 'left' | 'bottom' | 'right';
export default function SwipeableTemporaryDrawer() {
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer =
(anchor: Anchor, open: boolean) =>
(event: React.KeyboardEvent | React.MouseEvent) => {
if (
event &&
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor: Anchor) => (
);
return (
{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
))}
);
}
```
The following properties are used in this documentation website for optimal usability of the component:
- iOS is hosted on high-end devices.
The backdrop transition can be enabled without dropping frames.
The performance will be good enough.
- iOS has a "swipe to go back" feature that interferes
with the discovery feature, so discovery has to be disabled.
```jsx
const iOS =
typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
