Drawer

Navigation drawers provide quick access to other areas of an app without taking the user away from their current location.

Introduction

Drawers are commonly used as menus for desktop navigation, and as dialogs on mobile devices (similar to Apple's sheets).

<Drawer>
  {/* Drawer content */}
</Drawer>

Basics

import Drawer from '@mui/joy/Drawer';

The Drawer will close after the user makes a selection, clicks anywhere outside of it, or presses the Esc key.

Use the open prop to control the toggling of the Drawer's open and close states, as shown in the demo below:

Customization

Anchor

Use the anchor prop to specify which side of the screen the Drawer should originate from. The default value is left.

Size

Use the size prop to adjust the Drawer's width (when anchored to the left or right) or height (when anchored to the top or bottom).

Close button

Use the Modal Close component to add a close button to the Drawer that automatically handles the onClick event.

import ModalClose from '@mui/joy/ModalClose';

<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
  Open drawer
</Button>
<Drawer open={open} onClose={() => setOpen(false)}>
  <ModalClose />
  <DialogTitle>Title</DialogTitle>
</Drawer>

<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
  Open drawer
</Button>
<Drawer open={open} onClose={() => setOpen(false)}>
  <ModalClose />
  <DialogTitle>Title</DialogTitle>
</Drawer>

Press Enter to start editing

Transition

Customize the Drawer's opening transition by using the CSS variables below inside the sx prop:

--Drawer-transitionFunction: the transition function; default is ease.
--Drawer-transitionDuration: the duration of the transition; default is 0.3s.

Scrollable content

Use the Dialog Content component to create a scrollable container inside the Drawer.

import DialogContent from '@mui/joy/DialogContent';

Common examples

A common use case for the Drawer is to build mobile-friendly navigation menus:

Inset drawer

An inset drawer is a panel that's not anchored to any edge of the screen.

You can achieve this by applying background and padding values to the Drawer component, and using either a Box or Sheet component for a full-height wrapper, as shown below:

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.