Drawer

Display overlay area at any side of the screen
Import

Usage

import { useState } from 'react';
import { Drawer, Button, Group } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<>
<Drawer
opened={opened}
onClose={() => setOpened(false)}
title="Register"
padding="xl"
size="xl"
>
{/* Drawer content */}
</Drawer>
<Group position="center">
<Button onClick={() => setOpened(true)}>Open Drawer</Button>
</Group>
</>
);
}

Position

Drawer can be placed on left (default), top, right and bottom. Control drawer position with position prop:

<Drawer position="right" />

Customize overlay

Drawer uses Overlay component, you can change overlay opacity, blur and color:

import { Drawer, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return (
<Drawer
overlayColor={theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2]}
overlayOpacity={0.55}
overlayBlur={3}
>
{/* Drawer content */}
</Drawer>
);
}

Sizes

Control drawer size by setting size prop. You can use predefined values (xs, sm, md, lg, xl, full) or set drawer body size with any valid css value, for example, 200px, 25%, calc(100% - 100px). Size controls width for left and right positions and height for top and bottom. Size cannot exceed 100% of width and 100vh of height.

<Drawer position="right" size="xl" /> // predefined xl width
<Drawer position="top" size={200} /> // 200px width
<Drawer position="left" size="75%" /> // 75% width

Change transition

Drawer is built with Transition component. You can customize transition, timing function and duration:

<Drawer
transition="rotate-left"
transitionDuration={250}
transitionTimingFunction="ease"
/>

Accessibility and usability

By default:

  • When drawer is opened focus is trapped inside and document.body scroll is locked in current position
  • When user clicks on overlay or presses escape drawer is closed
  • Drawer transitions use disabled when user prefers to reduce motion
  • Drawer body has aria-modal and role="dialog" attributes

Add aria-labelledby, aria-describedby and closeButtonLabel props for better screen readers support:

<Drawer
aria-labelledby="drawer-title"
aria-describedby="drawer-body"
closeButtonLabel="Close drawer"
>
<h1 id="drawer-title">Title</h1>
<div id="drawer-body">Body</div>
</Drawer>

Initial focus

Drawer uses use-focus-trap to manage focus. To specify initial focus element add data-autofocus attribute:

<Drawer>
<input />
{/* Second input in modal will have initial focus */}
<input data-autofocus />
<input />
</Drawer>
Download more icon variants from https://tabler-icons.io/i/search

Drawer component props

NameTypeDescription
closeButtonLabel
string
Close button aria-label
closeOnClickOutside
boolean
Disable onMouseDown trigger for outside events
closeOnEscape
boolean
Disable onKeyDownCapture trigger for escape key press
id
string
id base, used to generate ids to connect drawer title and body with aria- attributes, defaults to random id
lockScroll
boolean
Disables scroll lock
onClose *
() => void
Called when drawer is closed (Escape key and click outside, depending on options)
opened *
boolean
If true drawer is mounted to the dom
overlayBlur
number
Overlay blur in px
overlayColor
string
Overlay color, for example, #000
overlayOpacity
number
Overlay opacity, number from 0 to 1
padding
number | "xs" | "sm" | "md" | "lg" | "xl"
Drawer body padding from theme or number for padding in px
position
"bottom" | "left" | "right" | "top"
Drawer body position
shadow
MantineShadow
Drawer body shadow from theme or any css shadow value
size
string | number
Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width
target
string | HTMLElement
Target element or selector where drawer portal should be rendered
title
ReactNode
Drawer title, displayed in header before close button
transition
MantineTransition
Drawer appear and disappear transition, see Transition component for full documentation
transitionDuration
number
Transition duration in ms
transitionTimingFunction
string
Drawer transitionTimingFunction css property
trapFocus
boolean
Disables focus trap
withCloseButton
boolean
Hides close button if set to false, drawer still can be closed with escape key and by clicking outside
withFocusReturn
boolean
Determines whether focus should be returned to the last active element when drawer is closed
withOverlay
boolean
Removes overlay entirely
withinPortal
boolean
Determines whether drawer should be rendered within Portal, defaults to true
zIndex
ZIndex
Drawer z-index property

Drawer component Styles API

NameStatic selectorDescription
root.mantine-Drawer-rootRoot element
overlay.mantine-Drawer-overlayOverlay
drawer.mantine-Drawer-drawerDrawer body element
header.mantine-Drawer-headerDrawer header, contains close button and title
title.mantine-Drawer-titleModal title
closeButton.mantine-Drawer-closeButtonClose button