Docs
πŸ—οΈ ⏐ Components
Layers
Drawer

Drawer

The Drawer component provides a hidden or off-canvas panel that can slide in or out from the edge of the screen, offering additional navigation or content without obstructing the main interface. One common use case is when user is analysing a list of entries from a table and they quickly wants to see details for some entries.

Examples

Basic example

Drawer as bottom sheet

Theme

This component uses the following default theme:

  • root{}(6 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

PropDescriptionDefault
positionPosition of the drawer.
"start" | "end" | "top" | "bottom"
end
sizeSize of the drawer.
string | number
80%
classNameCSS class name for the drawer.
string
contentClassNameCSS class name for the content of the drawer.
string
backdropClassNameCSS class name for the backdrop of the drawer.
string
disablePaddingWhether the drawer has a backdrop.
boolean
false
headerWhether the drawer has a backdrop.
any
showCloseButtonWhether the drawer has a backdrop.
boolean
true
childrenThe content of the drawer.
any
headerElementThe React element for the drawer header.
ReactElement<DrawerHeaderProps, FC<DrawerHeaderProps>>
<DrawerHeader />
themeTheme for the Drawer.
DrawerTheme
openIf true, the global overlay is open.
boolean
closeOnBackdropClickIf true, the global overlay will close when the backdrop is clicked.
boolean
true
hasBackdropIf true, the global overlay will have a backdrop.
boolean
true
closeOnEscapeIf true, the global overlay will close when the escape key is pressed.
boolean
true
onCloseA function that is called when the global overlay is closed.
() => void

Hook