Drawer

Drawer slides in from the side of the screen to display additional content or options, often used for navigation, filters, or settings, without taking the user away from the current page or context

Example

Basic Usage

Placements

By default, Drawer shows on the right. To customize it, you can specify placement prop like example below.

Width and height

You can specify a number on basis prop to set the width (if placement is Left or Right) or height (if placement is Top or Bottom). By default, basis is 480 (pixels).

Alternatively, you can specify the style directly throud inline style or css. However, note that this prop is also used for sliding animation. For example, if you want to set the width as 50vw, you can do so by specifying the style manually and set basis to window.innerWidth/2.

Content height

Whether placing the DrawerActions on the bottom can be done by specifying DrawerContent’s grow prop - when true, DrawerContent will fill the empty space and push down DrawerActions. This prop is true by default.

Nested

You can render a Drawer inside another to achieve nested Drawer. By default, the child Drawer will be rendered on top (overlap) of the parent.

If you want to make the parent shifted a little bit when the child opens like in Ant Design multi-drawer, you do so by passing a style to the parent.

Note that Drawer added extra padding by 200px and adjusted the position. This is to avoid an empty gap during animations. In specific case below, the normal one is right: -200px, while right: 0px is to slightly shift to the left.

Stack Nested

You can also render the child Drawer next to the parent instead of overlapping it by specifying stack prop to true. With this option, the child Drawer will also be rendered without any overlay.

In example below, Child is a separate component. Since Drawer unmounts the content after close, Child’s isOpen state will be gone automatically when Parent closes.

Animations

To disable animation, you can specify prop immediate to true.

Restrain dismissal

To restrain dismissal by clicking the overlay or pressing the escape key, you can specify prop restrainDismissal to true.

Keeping Background Interactive

You can specify showOverlay prop to false so that you can still interact with the background. This prop will also disable the focus-lock and omit some modal aria attributes.

Non-modal drawer

You can specify showOverlay prop to false and container prop to null or an HTML element so that you can mount the drawer with your primary content page.

Top and Bottom Shadows

When the content overflows, shadows will appear if DrawerContent is scrollable to top or bottom. Internally, it uses IntersectionObserver instead of scroll listener, so that it can also handle content size changes.

You can use EllipsisTooltip if the title is very long.

Accessibility

All aria attributes and keyboard interactions (Escape to close) are based on WAI-ARIA Dialog (Modal) pactices.

When a Drawer opens, it traps the focus and prevent body scrolling. However, when a drawer is nested and stacked, it won’t create another focus trap. Props disableFocusLock and disableScrollLock can be specified to override these default behaviours.

After close, Drawer will automatically return the focus back to the last focused element before it opens. This returning focus target is overridable by specifying returnFocusTo prop.

References

• Material Design: https://material.io/components/sheets-side
• Ant Design: https://ant.design/components/drawer/
• Material UI: https://material-ui.com/components/drawers/
• WAI-ARIA Dialog: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/

API

Drawer

DrawerActions

DrawerBox

DrawerClose

DrawerContent

DrawerOverlay

DrawerTitle