Drawer

The Drawer component is capable of showing and hiding its content with or without animation. When the Drawer opens, it will open on top of any other content. If you would like the Drawer to push and pull content on the page rather than open on top of it, consider using the ExpandCollapse component instead.

For more information on how to use the features and props for this component, check out the developer documentation.

The Drawer component can be anchored on any of the four edge boundaries (top, right, bottom, left) by setting the placement prop. Declare a size for the Drawer in order to set how far out the Drawer will open to. Drawers will always expand to 100% of the height (when using left or right) or width (when using top or bottom) of the viewport or containing element.

You can control how quickly the Drawer opens and closes by by passing a CSS time value to transitionSpeed, which is a string containing any positive number directly followed by 's' or 'ms'. If you would like no transition, pass 0 the to transitionSpeed prop.

If you would like to close a Drawer on any user click outside of the Drawer content, use the onOuterClick callback function. Additional callback functions are provided to allow for event handling before and after the Drawer opens and closes.

When a Drawer position is set to fixed, it will fill the entire edge of the viewport that is set by the placement prop. However, by setting the position prop to absolute, you can place the Drawer within a containing element. The Drawer will then be bound by that container.

When using a contained Drawer, make sure the direct parent element to the Drawer has style settings position: relative and overflow: hidden. This ensures that when the Drawer is closed, it will not be visible outside of the bounds of that parent element.

NameTypeDefaultDescription
open*booleanfalse If true, the Drawer will be visible.
asElementTypeHTML tag or React Component to render the component as.
childrenReactNodeContent of the Drawer.
classNamestringAdditional CSS classes.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
nullWhenClosedbooleanfalse If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.
onAfterClose() => voidCallback fired after Drawer closes.
onAfterOpen() => voidCallback fired after Drawer opens.
onBeforeClose() => voidCallback fired before Drawer closes.
onBeforeOpen() => voidCallback fired before Drawer opens.
onOuterClick() => voidCallback fired when a click action occurs outside of the Drawer.
placement
'top' |'right' |'bottom' |'left' 
"right" Used to determine which side of the viewport the Drawer should open from.
position
'absolute' |'fixed' 
"absolute" The position of the Drawer.
shadowbooleanfalse Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.
sizestring"100%" The width or height that the Drawer will open to, depending on its placement.
transitionSpeedstring"0.25s" Determines the speed of the transition. This value comes from theme.base.animation.speed.