Skip to Content

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

Custom Animation

Define custom animations for the drawer, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

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
initialProperties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation) ```jsx // As values <motion.div initial={{ opacity: 1 }} /> // As variant <motion.div initial="visible" variants={variants} /> // Multiple variants <motion.div initial={["visible", "active"]} variants={variants} /> // As false (disable mount animation) <motion.div initial={false} animate={{ opacity: 0 }} /> ``` @deprecated Use animation configuration instead.
boolean | TargetAndTransition | VariantLabels
animateValues to animate to, variant label(s), or `LegacyAnimationControls`. ```jsx // As values <motion.div animate={{ opacity: 1 }} /> // As variant <motion.div animate="visible" variants={variants} /> // Multiple variants <motion.div animate={["visible", "active"]} variants={variants} /> // LegacyAnimationControls <motion.div animate={animation} /> ``` @deprecated Use animation configuration instead.
boolean | TargetAndTransition | VariantLabels
exitA target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. ```jsx import { AnimatePresence, motion } from 'framer-motion' export const MyComponent = ({ isVisible }) => { return ( <AnimatePresence> {isVisible && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> )} </AnimatePresence> ) } ``` @deprecated Use animation configuration instead.
TargetAndTransition | VariantLabels
transitionDefault transition. If no `transition` is defined in `animate`, it will use the transition defined here. ```jsx const spring = { type: "spring", damping: 10, stiffness: 100 } <motion.div transition={spring} animate={{ scale: 1.2 }} /> ``` @deprecated Use animation configuration instead.
Transition<any>
animationAnimation configuration for the drawer.
MotionNodeAnimationOptions
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
Last updated on