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,
for example <Drawer position="top" />
.
Offset
Set offset
prop to change drawer offset from the edge of the viewport:
Customize overlay
Drawer
uses Overlay component, you can set any props that Overlay
supports with overlayProps
:
Sizes
You can change drawer width/height (depends on position
) by setting size
prop to predefined size or any valid width,
for example, size="55%"
or size={200}
:
Remove header
To remove header set withCloseButton={false}
Drawer with scroll
Usage with ScrollArea
Change transition
Drawer
is built with Transition component. Use transitionProps
prop to customize any Transition properties:
Initial focus
Drawer
uses FocusTrap to trap focus. Add data-autofocus
attribute to the element that should receive initial focus.
If you do not want to focus any elements when the drawer is opened, use FocusTrap.InitialFocus
component to create a visually hidden element that will receive initial focus:
If you do not add data-autofocus
attribute and do not use FocusTrap.InitialFocus
,
drawer will focus the first focusable element inside it which is usually the close button.
Control behavior
The following props can be used to control Drawer
behavior.
In most cases it is not recommended to turn these features off –
it will make the component less accessible.
trapFocus
– determines whether focus should be trapped inside drawercloseOnEscape
– determines whether the drawer should be closed whenEscape
key is pressedcloseOnClickOutside
– determines whether the drawer should be closed when user clicks on the overlayreturnFocus
– determines whether focus should be returned to the element that was focused before the drawer was opened
react-remove-scroll settings
Drawer
uses react-remove-scroll
package to lock scroll. You can pass props down to the RemoveScroll
component
with removeScrollProps
:
Change close icon
Use closeButtonProps
to customize close button:
Compound components
You can use the following compound components to have full control over the Drawer
rendering:
Drawer.Root
– context providerDrawer.Overlay
– render OverlayDrawer.Content
– main drawer element, should include all drawer contentDrawer.Header
– sticky header, usually containsDrawer.Title
andDrawer.CloseButton
Drawer.Title
–h2
element,aria-labelledby
ofDrawer.Content
is pointing to this element, usually is rendered insideDrawer.Header
Drawer.CloseButton
– close button, usually rendered insideDrawer.Header
Drawer.Body
– a place for main content,aria-describedby
ofDrawer.Content
is pointing to this element
Fixed elements offset
Drawer
component uses react-remove-scroll
package to lock scroll. To properly size these elements
add a className
to them (documentation):
Accessibility
Drawer
component follows WAI-ARIA recommendations on accessibility.
Set title
props to make component accessible, will add aria-labelledby
to the content element:
To set close button aria-label
use closeButtonProps
: