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.

Props#

Drawer Props#

Drawer composes the Modal component with these extra props:

`isOpenrequired`

Description

If true, the modal will be open.

Type

boolean

`onCloserequired`

Description

Callback invoked to close the modal.

Type

() => void

`allowPinchZoom`

Description

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.

Type

boolean

Default

false.

`autoFocus`

Description

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

Type

boolean

Default

true

`blockScrollOnMount`

Description

If true, scrolling will be disabled on the body when the modal opens.

Type

boolean

Default

true

`closeOnEsc`

Description

If true, the modal will close when the Esc key is pressed

Type

boolean

Default

true

`closeOnOverlayClick`

Description

If true, the modal will close when the overlay is clicked

Type

boolean

Default

true

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

`finalFocusRef`

Description

The ref of element to receive focus when the modal closes.

Type

RefObject<FocusableElement>

`id`

Description

The id of the modal

Type

string

`initialFocusRef`

Description

The ref of element to receive focus when the modal opens.

Type

RefObject<FocusableElement>

`isFullHeight`

Description

If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh)

Type

boolean

`lockFocusAcrossFrames`

Description

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe

Type

boolean

Default

false

`onCloseComplete`

Description

Fires when all exiting nodes have completed animating out

Type

() => void

`onEsc`

Description

Callback fired when the escape key is pressed and focus is within modal

Type

() => void

`onOverlayClick`

Description

Callback fired when the overlay is clicked.

Type

() => void

`placement`

Description

The placement of the drawer

Type

SlideDirection | LogicalPlacement

Default

right

`portalProps`

Description

Props to be forwarded to the portal component

Type

Pick<
  PortalProps,
  "appendToParentPortal" | "containerRef"
>

`preserveScrollBarGap`

Description

If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

Type

boolean

Default

true

`returnFocusOnClose`

Description

If true, the modal will return focus to the element that triggered it when it closes.

Type

boolean

Default

true

`size`

Description

The size of the Drawer

Type

"xs" | "sm" | "md" | "lg" | "xl" | "full"

Default

xs

`trapFocus`

Description

If false, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. 🚨Warning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.

Type

boolean

Default

true

`useInert`

Description

A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**

Type

boolean

Default

true

`variant`

Description

The variant of the Drawer

Type

string

Other components#

DrawerOverlay, DrawerFooter, DrawerHeader and DrawerBody composes Box component
DrawerCloseButton composes CloseButton

Props#

Drawer Props#

Drawer composes the Modal component with these extra props:

`isOpenrequired`

Description

If true, the modal will be open.

Type

boolean

`onCloserequired`

Description

Callback invoked to close the modal.

Type

() => void

`allowPinchZoom`

Description

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.

Type

boolean

Default

false.

`autoFocus`

Description

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

Type

boolean

Default

true

`blockScrollOnMount`

Description

If true, scrolling will be disabled on the body when the modal opens.

Type

boolean

Default

true

`closeOnEsc`

Description

If true, the modal will close when the Esc key is pressed

Type

boolean

Default

true

`closeOnOverlayClick`

Description

If true, the modal will close when the overlay is clicked

Type

boolean

Default

true

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

`finalFocusRef`

Description

The ref of element to receive focus when the modal closes.

Type

RefObject<FocusableElement>

`id`

Description

The id of the modal

Type

string

`initialFocusRef`

Description

The ref of element to receive focus when the modal opens.

Type

RefObject<FocusableElement>

`isFullHeight`

Description

If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh)

Type

boolean

`lockFocusAcrossFrames`

Description

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe

Type

boolean

Default

false

`onCloseComplete`

Description

Fires when all exiting nodes have completed animating out

Type

() => void

`onEsc`

Description

Callback fired when the escape key is pressed and focus is within modal

Type

() => void

`onOverlayClick`

Description

Callback fired when the overlay is clicked.

Type

() => void

`placement`

Description

The placement of the drawer

Type

SlideDirection | LogicalPlacement

Default

right

`portalProps`

Description

Props to be forwarded to the portal component

Type

Pick<
  PortalProps,
  "appendToParentPortal" | "containerRef"
>

`preserveScrollBarGap`

Description

Type

boolean

Default

true

`returnFocusOnClose`

Description

If true, the modal will return focus to the element that triggered it when it closes.

Type

boolean

Default

true

`size`

Description

The size of the Drawer

Type

"xs" | "sm" | "md" | "lg" | "xl" | "full"

Default

xs

`trapFocus`

Description

Type

boolean

Default

true

`useInert`

Description

A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**

Type

boolean

Default

true

`variant`

Description

The variant of the Drawer

Type

string

Other components#

DrawerOverlay, DrawerFooter, DrawerHeader and DrawerBody composes Box component
DrawerCloseButton composes CloseButton

Theming#

The Drawer component is a multipart component.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: header
B: overlay
C: dialogContainer
D: dialog
E: closeButton
F: body
G: footer

You can find more information in the source here.

Theming properties#

The properties that affect the theming of the Drawer component are:

variant: The visual variant of the Drawer. Defaults to baseStyle.
size: The size of the Drawer. Defaults to md.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

Customizing the default theme#

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  overlay: {
    bg: 'blackAlpha.200', //change the background
  },
  dialog: {
    borderRadius: 'md',
    bg: `purple.100`,
  },
})

export const drawerTheme = defineMultiStyleConfig({
  baseStyle,
})

After customizing the drawer theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { drawerTheme } from './components/theme/drawer'

export const theme = extendTheme({
  components: { Drawer: drawerTheme },
})

This is a crucial step to make sure that any changes that we make to the Drawer theme are applied.

Adding a custom size#

Let's assume we want to change the font size of both header and dialog.

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import {
  createMultiStyleConfigHelpers,
  defineStyle,
} from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const xl = defineStyle({
  px: '6',
  py: '2',
  fontSize: 'xl',
})

const sm = defineStyle({
  fontSize: 'sm',
  py: '6',
})

const sizes = {
  xl: definePartsStyle({ header: sm, dialog: xl }),
}

export const drawerTheme = defineMultiStyleConfig({
  sizes,
})

// Now we can use the new `xl` size
<Drawer size="xl" ... />

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom variant. Here's how we can do that:

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const purple = definePartsStyle({
  dialog: {
    borderRadius: 'md',
    bg: `purple.100`,

    // Let's also provide dark mode alternatives
    _dark: {
      bg: `purple.600`,
      color: 'white',
    },
  },
})

export const drawerTheme = defineMultiStyleConfig({
  variants: { purple },
})

// Now we can use the new `purple` variant
<Drawer variant='purple' ... />

Changing the default properties#

Let's assume we want to change the default size and variant of every Drawer in our app.

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)

export const drawerTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'purple',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use a Drawer:
<Drawer size="xl" variant="purple" ... />

Showcase#

import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
    useDisclosure,
    Button,
    Box,
    IconButton,
    useColorMode,
  } from "@chakra-ui/react";
  import { FaMoon, FaSun } from "react-icons/fa";
  
  
  export default function App() {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { toggleColorMode, colorMode } = useColorMode();
  
    return (
        <Box position="relative" h="100vh" p={12}>
        <Button onClick={onOpen}>Open Drawer</Button>
  
        <Drawer isOpen={isOpen} onClose={onClose}>
          <DrawerOverlay />
          <DrawerContent>
            <DrawerHeader>Drawer Title</DrawerHeader>
            <DrawerCloseButton />
            <DrawerBody>
              Lorem ipsum dolor sit amet. Et corporis quisquam eum adipisci
              impedit quo eius nisi est aspernatur vel veniam velit qui numquam
              totam. Vel debitis sint ut culpa cupiditate a dolores voluptates ut
              vero voluptatem non rerum aliquid qui sapiente possimus. Eum natus
              voluptates hic galisum architecto et nobis incidunt ut odio ipsum
              qui repudiandae voluptatem.
            </DrawerBody>
  
            <DrawerFooter>
              <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
              </Button>
              <Button variant="ghost">Secondary Action</Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
        <IconButton
          aria-label="change theme"
          rounded="full"
          size="xs"
          position="absolute"
          bottom={4}
          left={4}
          onClick={toggleColorMode}
          icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
        />
      </Box>
    );
  }

Open Sandbox

Edit this page on GitHub