Drawer can be placed on
bottom. Control drawer position with
<Drawer position="top" />.
You can change drawer width/height (depends on
position) by setting
size prop to predefined size or any valid width,
To remove header set
Drawer uses FocusTrap to trap focus. Add
attribute to the element that should receive initial focus.
The following props can be used to control
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 drawer
closeOnEscape– determines whether the drawer should be closed when
Escapekey is pressed
closeOnClickOutside– determines whether the drawer should be closed when user clicks on the overlay
returnFocus– determines whether focus should be returned to the element that was focused before the drawer was opened
You can use the following compound components to have full control over the
Drawer.Root– context provider
Drawer.Overlay– render Overlay
Drawer.Content– main drawer element, should include all drawer content
Drawer.Header– sticky header, usually contains
Drawer.Contentis pointing to this element, usually is rendered inside
Drawer.CloseButton– close button, usually rendered inside
Drawer.Body– a place for main content,
Drawer.Contentis pointing to this element
Drawer component follows WAI-ARIA recommendations on accessibility.
title props to make component accessible, will add
aria-labelledby to the content element:
To set close button