Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Import#

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
} from "@nature-ui/core";

Usage#

Basic Drawer#

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();

  return (
    <>
      <Button ref={btnRef} className="bg-primary-500" onClick={onOpen}>
        Open
      </Button>
      <Drawer isOpen={isOpen} onClose={onClose} finalFocusRef={btnRef}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>Create your account</DrawerHeader>
          <DrawerCloseButton />

          <DrawerBody>
            <Input placeholder="Type here..." />
          </DrawerBody>

          <DrawerFooter>
            <Button
              variant="outline"
              className="mr-3 t text-primary-500"
              onClick={onClose}
            >
              Cancel
            </Button>
            <Button className="bg-primary-500">Save</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Drawer placement#

The Drawer can appear from any edge of the screen. Pass the placement prop and set it to top, right, bottom, or left.

function PlacementExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [placement, setPlacement] = React.useState("left");

  return (
    <>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack row className="mb-4">
          <Radio value="top">Top</Radio>
          <Radio value="right">Right</Radio>
          <Radio value="bottom">Bottom</Radio>
          <Radio value="left">Left</Radio>
        </Stack>
      </RadioGroup>
      <Button className="bg-blue-600" onClick={onOpen}>
        Open
      </Button>
      <Drawer placement={placement} onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader className="border-b">Basic Drawer</DrawerHeader>
          <DrawerBody>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}

With Sizes#

The size prop accepts one of xs, sm, md, lg, xl or full.

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [size, setSize] = React.useState("xs");

  const btnRef = React.useRef();

  return (
    <>
      <Button ref={btnRef} className="bg-purple-500" onClick={onOpen}>
        Open
      </Button>

      <RadioGroup defaultValue={size} onChange={setSize}>
        <Stack row className="mt-4">
          <Radio value="xs">xs</Radio>
          <Radio value="sm">sm</Radio>
          <Radio value="md">md</Radio>
          <Radio value="lg">lg</Radio>
          <Radio value="full">full</Radio>
        </Stack>
      </RadioGroup>
      <Drawer
        size={size}
        isOpen={isOpen}
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>Create your account</DrawerHeader>

          <DrawerBody>
            <Input placeholder="Type here..." />
          </DrawerBody>

          <DrawerFooter>
            <Button
              variant="outline"
              className="mr-3"
              className="text-gray-600"
              onClick={onClose}
            >
              Cancel
            </Button>
            <Button className="bg-blue-500">Save</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Focus on specific element#

When a form is in the drawer, you might need to set focus on a specific element when the drawer opens. Pass the initialFocusRef prop.

Without the initialFocusRef prop, the drawer will set focus on the first focusable element when it opens.

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const firstField = React.useRef();

  return (
    <>
      <Button leftIcon={<AddIcon />} className="bg-purple-500" onClick={onOpen}>
        Create user
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="left"
        initialFocusRef={firstField}
        onClose={onClose}
      >
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader className="border-b">
              Create a new account
            </DrawerHeader>

            <DrawerBody>
              <Stack col>
                <FormControl id="username" className="mb-4" isRequired>
                  <FormLabel>Name</FormLabel>
                  <Input
                    ref={firstField}
                    placeholder="Please enter user name"
                  />
                </FormControl>

                <FormControl id="url">
                  <FormLabel>Url</FormLabel>
                  <Input
                    placeholder="your-website"
                    defaultValue="divinehycenth"
                    addonLeft="https://"
                    addonRight=".com"
                  />
                </FormControl>

                <FormControl id="description">
                  <FormLabel>Description</FormLabel>
                  <textarea
                    id="desc"
                    className="w-full p-2 border border-solid border-gray-300"
                  ></textarea>
                </FormControl>
              </Stack>
            </DrawerBody>

            <DrawerFooter className="border-t">
              <Button className="mr-3 text-gray-600" onClick={onClose}>
                Cancel
              </Button>
              <Button className="bg-primary-500">Submit</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  );
}

Accessibility#

When opening the Drawer, focus is trapped inside the Drawer.
By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
After the drawer closes, it'll return focus to the element that triggered it.

Props#

Drawer Props#

Drawer composes the Modal component with these extra props:

Name	Type	Default	Description
`isFullHeight`	`boolean`	`false`	If `true` and `placement` is set to `top` or `bottom`, the drawer fills the height of the viewport.
`placement`	`left`, `right`, `top`, `bottom`	`right`	The ref to the initial element to receive focus when the drawer opens.
size	`xs`	`xs`, `sm`, `md`, `lg`, `xl`, `full`

Other components#

DrawerCloseButton composes CloseButton