swipeable-drawer

Import

import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// or
import { SwipeableDrawer } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props of the Drawer component are also available.

Props

Name	Type	Default	Description
onClose*	func	-	Callback fired when the component requests to be closed. Signature: function(event: React.SyntheticEvent<{}>) => void - event The event source of the callback.
onOpen*	func	-	Callback fired when the component requests to be opened. Signature: function(event: React.SyntheticEvent<{}>) => void - event The event source of the callback.
allowSwipeInChildren	func | bool	false	If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer’s children.
children	node	-	The content of the component.
disableBackdropTransition	bool	false	Disable the backdrop transition.
disableDiscovery	bool	false	If true, touching the screen near the edge of the drawer will not slide in the drawer.
disableSwipeToOpen	bool	typeof navigator !== ‘undefined’ && /iPad|iPhone|iPod/.test(navigator.userAgent)	If true, swipe to open is disabled.
hysteresis	number	0.52	Affects how far the drawer must be opened/closed to change its state.
minFlingVelocity	number	450	Defines the velocity at which the swipe is considered complete.
open	bool	false	If true, the component is shown.
SwipeAreaProps	object	-	The element used to intercept the touch events on the edge.
swipeAreaWidth	number	20	The width of the area in px that the drawer can be swiped open from.
transitionDuration	number | { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen }	The duration for the transition, in milliseconds.

Inheritance

The props of the Drawer component are also available in SwipeableDrawer.

CSS

Class name	Rule name	Description
.MuiSwipeableDrawer-docked	docked	Styles applied to the root element if variant="permanent or persistent".
.MuiSwipeableDrawer-modal	modal	Styles applied to the Modal component.
.MuiSwipeableDrawer-paper	paper	Styles applied to the Paper component.
.MuiSwipeableDrawer-paperAnchorBottom	paperAnchorBottom	Styles applied to the Paper component if anchor="bottom".
.MuiSwipeableDrawer-paperAnchorDockedBottom	paperAnchorDockedBottom	Styles applied to the Paper component if anchor="bottom" and variant is not “temporary”.
.MuiSwipeableDrawer-paperAnchorDockedLeft	paperAnchorDockedLeft	Styles applied to the Paper component if anchor="left" and variant is not “temporary”.
.MuiSwipeableDrawer-paperAnchorDockedRight	paperAnchorDockedRight	Styles applied to the Paper component if anchor="right" and variant is not “temporary”.
.MuiSwipeableDrawer-paperAnchorDockedTop	paperAnchorDockedTop	Styles applied to the Paper component if anchor="top" and variant is not “temporary”.
.MuiSwipeableDrawer-paperAnchorLeft	paperAnchorLeft	Styles applied to the Paper component if anchor="left".
.MuiSwipeableDrawer-paperAnchorRight	paperAnchorRight	Styles applied to the Paper component if anchor="right".
.MuiSwipeableDrawer-paperAnchorTop	paperAnchorTop	Styles applied to the Paper component if anchor="top".
.MuiSwipeableDrawer-root	root	Styles applied to the root element.

Customization

You can override the style of the component using:

• A global class name
• A rule name as part of the component’s styleOverrides property in a custom theme

Source Code

View the implementation of the component