Drawer

Basic Drawer

<Drawer> slides in from the right with additional content in the context of a page.

For mobile screens it will be displayed as a full screen dialog with a close button, therefore these two props are required;

• isOpen: boolean state to set the Drawer open
• onRequestClose: function called when close button (or overlay) is clicked

By default, an overlay is rendered for screens 1280px and below. Overlay enables closing the Drawer by using the esc key (and traps the focus).

Add CSS class .bf-drawer-padding on page content if you don't want it to overlap (for large screens 1280px+)

<Drawer
  header="Drawer header"
  isOpen={openState}
  onRequestClose={() => setOpenState(false)}
>
  <p>Drawer content</p>
</Drawer>

Force overlay

To always have an overlay with the Drawer, use the overlay prop. The prop can also be set to false to never show an overlay.

<Drawer overlay>

Fixed footer

The footer prop provides a fixed (non-scrollable) area at the bottom of the Drawer, and creates a scrollbar for the rest of the content if overflowed.

<Drawer footer={<Button>Visit Ásgarðr</Button>}>

Bottom position

Slide the drawer in from bottom of the screen with position='bottom'. Does not render an overlay, unless explicitly defined.

You may wish to omit onRequestClose and create your own close button instead.

<Drawer position="bottom">

Remove padding

The noPadding prop removes the default padding inside the drawer.

When used along with footer it also removes the gap between content and footer area.

<Drawer noPadding>

Keyboard focus issues

Keyboard focus can be trapped inside Drawer by design ("tab" will not move focus outside drawer until it is closed) - and the same is true for Modal. If you render both at the same time they will compete for focus and bugs will ensue, therefore make sure to disableFocusTrap whenever a Modal is open.

const [modalOpen, setModalOpen] = useState(true);

<Drawer disableFocusTrap={modalOpen} />
<Modal open={modalOpen} />