Display overlay area at any side of the screen
Drawer can be placed on left (default), top , right and bottom . Control the drawer position with the position prop, for example <Drawer position="top" /> .
Set the offset prop to change the drawer offset from the edge of the viewport:
Drawer uses the Overlay component. You can set any props that Overlay supports with overlayProps :
You can change the drawer width/height (depends on position ) by setting the size prop to a predefined size or any valid width, for example, size="55%" or size={200} :
To remove the header, set withCloseButton={false}
Drawer is built with the Transition component. Use the transitionProps prop to customize any Transition properties:
The onExitTransitionEnd and onEnterTransitionEnd props can be used to run code after the exit/enter transition is finished. For example, this is useful when you want to clear data after the drawer is closed:
Drawer uses FocusTrap to trap focus. Add the data-autofocus attribute to the element that should receive initial focus.
If you do not want to focus any elements when the drawer is opened, use the FocusTrap.InitialFocus component to create a visually hidden element that will receive initial focus:
If you do not add the data-autofocus attribute and do not use FocusTrap.InitialFocus , the drawer will focus the first focusable element inside it which is usually the close button.
The following props can be used to control Drawer behavior. In most cases it is not recommended to turn these features off – it will make the component less accessible.
Drawer uses react-remove-scroll package to lock scroll. You can pass props down to the RemoveScroll component with removeScrollProps :
Use closeButtonProps to customize close button:
You can use the following compound components to have full control over the Drawer rendering:
Use Drawer.Stack component to render multiple drawers at the same time. Drawer.Stack keeps track of opened drawers, manages z-index values, focus trapping and closeOnEscape behavior. Drawer.Stack is designed to be used with useDrawersStack hook.
Differences from using multiple Drawer components:
Note that Drawer.Stack can only be used with Drawer component. Components built with Drawer.Root and other compound components are not compatible with Drawer.Stack .
useDrawersStack hook provides an easy way to control multiple drawers at the same time. It accepts an array of unique drawers ids and returns an object with the following properties:
Example of using useDrawersStack with Drawer component:
Drawer component uses react-remove-scroll package to lock scroll. To properly size these elements add a className to them ( documentation ):
Drawer component follows WAI-ARIA recommendations on accessibility.
Set title props to make component accessible, will add aria-labelledby to the content element:
To set close button aria-label use closeButtonProps :