Drawer is wrapped in Portal component, it can be rendered only on client as createPortal is not available during server side rendering:
Drawer can be placed on left (default), top, right and bottom. Control drawer position with
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.
You can change drawer behavior with props:
noOverlay– removes overlay
noFocusTrap– removes focus trap inside drawer body
noScrollLock– disables scroll lock
noCloseOnClickOutside– do not trigger onClose for outside clicks
noCloseOnEscape– do not trigger onClose for escape key press
Try combining these props to achieve desired behavior. Note that disabling some parts will break accessibility and usability.
Drawer is built with Transition component. You can customize transition, timing function and duration:
- 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
Drawer uses use-focus-trap to manage focus.
To specify initial focus element add