Drawer
Display overlay area at any side of the screen
Import
Source
Docs
Package
Usage
Position
Drawer can be placed on left (default), top, right and bottom. Control drawer position with position
prop:
Customize overlay
Drawer uses Overlay component, you can change overlay opacity, blur and color:
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.
Change transition
Drawer is built with Transition component. You can customize transition, timing function and duration:
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 wrapper has
aria-modal="true"
androle="dialog"
attributes - Drawer wrapper has
aria-labelledby
andaria-describedby
pointing to drawer title and body
Initial focus
Drawer uses use-focus-trap to manage focus.
To specify initial focus element add data-autofocus
attribute:
Drawer component props
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
root | .mantine-Drawer-root | Root element |
overlay | .mantine-Drawer-overlay | Overlay |
drawer | .mantine-Drawer-drawer | Drawer element, contains header and body |
header | .mantine-Drawer-header | Drawer header, contains close button and title |
body | .mantine-Drawer-body | Drawer body, contains children |
title | .mantine-Drawer-title | Modal title |
closeButton | .mantine-Drawer-closeButton | Close button |