Drawer API
API reference docs for the React Drawer component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import Drawer from '@mui/material/Drawer';
// or
import { Drawer } from '@mui/material';Learn about the difference by reading this guide on minimizing bundle size.
The props of the Modal component are available
when variant="temporary" is set.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| anchor | 'bottom' | 'left' | 'right' | 'top' | 'left' | Side from which the drawer will appear. |
| children | node | - | The content of the component. |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| elevation | integer | 16 | The elevation of the drawer. |
| hideBackdrop | bool | false | If |
| ModalProps | object | {} | Props applied to the |
| onClose | func | - | Callback fired when the component requests to be closed. The Signature: function(event: object, reason: string) => void
|
| open | bool | false | If |
| PaperProps | object | {} | Props applied to the |
| SlideProps | object | - | Props applied to the |
| slotProps | { backdrop?: func | object, docked?: func | object, paper?: func | object, root?: func | object, transition?: func | object } | {} | The props used for each slot inside. |
| slots | { backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType } | {} | The components used for each slot inside. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| 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. You may specify a single timeout for all transitions, or individually with an object. |
| variant | 'permanent' | 'persistent' | 'temporary' | 'temporary' | The variant to use. |
ref is forwarded to the root element.Theme default props
You can use MuiDrawer to change the default props of this component with the theme.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .MuiDrawer-root | Modal | The component used for the root when the variant is temporary. |
| backdrop | Backdrop | The component used for the Modal backdrop. | |
| docked | .MuiDrawer-docked | div | The component used for the root element when the variant is permanent or persistent. |
| paper | .MuiDrawer-paper | Paper | The component used for the paper. |
| transition | Slide | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| .MuiDrawer-anchorBottom | anchorBottom | Styles applied to the root element if anchor="bottom". |
| .MuiDrawer-anchorLeft | anchorLeft | Styles applied to the root element if anchor="left". |
| .MuiDrawer-anchorRight | anchorRight | Styles applied to the root element if anchor="right". |
| .MuiDrawer-anchorTop | anchorTop | Styles applied to the root element if anchor="top". |
| .MuiDrawer-modal | modal | Styles applied to the Modal component. |
| .MuiDrawer-paperAnchorBottom | paperAnchorBottom | Styles applied to the Paper component if anchor="bottom". |
| .MuiDrawer-paperAnchorDockedBottom | paperAnchorDockedBottom | Styles applied to the Paper component if anchor="bottom" and variant is not "temporary". |
| .MuiDrawer-paperAnchorDockedLeft | paperAnchorDockedLeft | Styles applied to the Paper component if anchor="left" and variant is not "temporary". |
| .MuiDrawer-paperAnchorDockedRight | paperAnchorDockedRight | Styles applied to the Paper component if anchor="right" and variant is not "temporary". |
| .MuiDrawer-paperAnchorDockedTop | paperAnchorDockedTop | Styles applied to the Paper component if anchor="top" and variant is not "temporary". |
| .MuiDrawer-paperAnchorLeft | paperAnchorLeft | Styles applied to the Paper component if anchor="left". |
| .MuiDrawer-paperAnchorRight | paperAnchorRight | Styles applied to the Paper component if anchor="right". |
| .MuiDrawer-paperAnchorTop | paperAnchorTop | Styles applied to the Paper component if anchor="top". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.