Drawer

Drawer is part of a collection of components, also including Sheet, Dialog and Modal, that overlay content on top of a full-page view and often block the UI below. The Drawer component is a panel that slides out from the edge of the screen, useful when you need users to complete a more complex task or view some details without leaving the current page.

Figma

React

Bootstrap

Native

Design guidance

When and how to use this

Use a Drawer in cases where the user needs to complete a task or action that is too complex or lengthy to show in a Modal. A Drawer is also a good choice if the user needs to view read-only details about an item in a list in a focused way.

When to consider something else

If the task or action a user needs to complete is simple or involves a form with only a couple of fields, a Modal may be a better choice.

Use a Dialog instead of a Drawer if the user just needs to give a simple confirmation, especially following the invocation of a destructive action.

Figma

Drag in a Drawer from the Modals v2 library in the Assets pane in your Figma file. You will need to separately drag in a ModalOverlay to go behind the Drawer in your design. We provide 3 size variants that correspond with those found in our React Drawer component, with Large as the default. Note that after choosing the appropriate size variant for your use case, you will want to detach the component instance in order to work with the content in the Drawer.

React

import { Drawer } from '@hover/blueprint';

Render the Drawer component itself unconditionally using the isOpen and onClose props to control its open state. The useDisclosure hook is purpose-built to manage the open state of overlays.

Initial Focus
By default, the first focusable element will receive focus when the Drawer is opened. Pass initialFocusRef to focus on a particular element instead.

live

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Drawer
        footer={
          <Box flexWrap="wrap" gridGap="400">
            <Button fill="outline" size="large">
              No, Thank You
            </Button>
            <Button size="large">Yes, Please</Button>
          </Box>
        }
        header="Spectacular Header"
        isOpen={isOpen}
        onClose={onClose}
      >
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Amet consectetur
        adipiscing elit quisque faucibus ex sapien. Quisque faucibus ex sapien
        vitae pellentesque sem placerat. Vitae pellentesque sem placerat in id
        cursus mi.
      </Drawer>
      <Button iconBefore={iChevronsLeft} onClick={onOpen} shape="box">
        Open
      </Button>
    </>
  );
};

Prop	Description
`size`	Sets a specific size for the Drawer. Valid values are `small`, `medium`, or `large`
`header`	Sets the heading content. The value can be a simple string, in which case it is rendered as the appropriate `Heading` style. A JSX fragment can also be provided.
`footer`	Sets the footer content. When provided, `footer` content is wrapped in an `HStack` by default with the appropriate spacing. If the `footer` content is wrapped in a layout container (`Box`, `Stack`, etc.), it will be rendered as the `footer` element.
`isOverlay`	Defaults to `true`. If set to `false`, users will be able to interact with content outside the Drawer while it is open.
`isClosable`	Defaults to `true`.

Persistent Overlay

By default, the Drawer will block outside interaction with an overlay element. Set isOverlay to false to make the Drawer persistent, meaning that it will not close when the user clicks outside of it. This is useful for cases like an item detail panel in a list where the user may want to quickly view multiple items.

live

() => {
  const [selectedItem, setSelectedItem] = useState(null);
  return (
    <>
      <Drawer
        header={`Item ${selectedItem}`}
        isOverlay={false}
        isOpen={!!selectedItem}
        onClose={() => setSelectedItem(null)}
      >
        <LoremIpsum
          generate={{
            p: selectedItem?.length - 7,
            words: 20 - selectedItem?.length,
          }}
        />
      </Drawer>
      <OrderedList>
        <ListItem>
          <Link as="button" onClick={() => setSelectedItem('Grumpy Cat')}>
            Grumpy Cat
          </Link>
        </ListItem>
        <ListItem>
          <Link as="button" onClick={() => setSelectedItem('Nyan Cat')}>
            Nyan Cat
          </Link>
        </ListItem>
        <ListItem>
          <Link as="button" onClick={() => setSelectedItem('Keyboard Cat')}>
            Keyboard Cat
          </Link>
        </ListItem>
      </OrderedList>
    </>
  );
};

Bootstrap

We do not currently ship a Bootstrap equivalent to Drawer.

Blueprint

Settings