Drawer

Navigation drawers provide quick access to other destinations in your app without removing the user out of context.

Introduction

Basic

The 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.

Customization

Anchor

You can use the anchor prop for specifying where the drawer should appear from.

Close button

Use the ModalClose component to add a close button to the drawer.

<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

Size

The size prop allows you to adjust the size of the drawer.

Transition

Set these CSS variables to the sx prop to the transition of the drawer:

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

Scrollable content

Use the DialogContent component to create a scrollable content inside the drawer.

Common examples

Filter drawer

To create an inset panel, set the background and padding of the Drawer's content slot and then create a full height wrapper using Sheet or Box component.

API

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

<Drawer />