Skip to content

Latest commit

 

History

History
82 lines (59 loc) · 2.22 KB

Drawer.mdx

File metadata and controls

82 lines (59 loc) · 2.22 KB
Raw
group package title order slug category description props import source docs styles
mantine-core
@mantine/core
Drawer
1
/core/drawer/
overlay
Display overlay area at any side of the screen
Drawer
import { Drawer } from '@mantine/core';
mantine-core/src/Drawer/Drawer.tsx
core/Drawer.mdx
Drawer

import { DrawerDemos } from '@mantine/demos';

Usage

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:

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:

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" and role="dialog" attributes
  • Drawer wrapper has aria-labelledby and aria-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>
  <input />
  {/* Second input in modal will have initial focus */}
  <input data-autofocus />
  <input />
</Drawer>