Drawer API
API documentation for the React Drawer component. Learn about the available props and the CSS API.
Import
import Drawer from '@mui/material/Drawer';
// or
import { Drawer } from '@mui/material';The props of the Modal component are available
when variant="temporary" is set.
Component name
The nameMuiDrawer can be used when providing default props or style overrides in the theme.Props
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 API below for more details. | |
| elevation | integer | 16 | The elevation of the drawer. |
| hideBackdrop | bool | false | If true, the backdrop is not rendered. |
| ModalProps | object | {} | Props applied to the Modal element. |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object) => voidevent: The event source of the callback. | |
| open | bool | false | If true, the component is shown. |
| PaperProps | object | {} | Props applied to the Paper element. |
| SlideProps | object | Props applied to the Slide element. | |
| 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: duration.enteringScreen, exit: 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. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiDrawer-root | Styles applied to the root element. |
| docked | .MuiDrawer-docked | Styles applied to the root element if variant="permanent or persistent". |
| paper | .MuiDrawer-paper | Styles applied to the Paper component. |
| paperAnchorLeft | .MuiDrawer-paperAnchorLeft | Styles applied to the Paper component if anchor="left". |
| paperAnchorRight | .MuiDrawer-paperAnchorRight | Styles applied to the Paper component if anchor="right". |
| paperAnchorTop | .MuiDrawer-paperAnchorTop | Styles applied to the Paper component if anchor="top". |
| paperAnchorBottom | .MuiDrawer-paperAnchorBottom | Styles applied to the Paper component if anchor="bottom". |
| paperAnchorDockedLeft | .MuiDrawer-paperAnchorDockedLeft | Styles applied to the Paper component if anchor="left" and variant is not "temporary". |
| paperAnchorDockedTop | .MuiDrawer-paperAnchorDockedTop | Styles applied to the Paper component if anchor="top" and variant is not "temporary". |
| paperAnchorDockedRight | .MuiDrawer-paperAnchorDockedRight | Styles applied to the Paper component if anchor="right" and variant is not "temporary". |
| paperAnchorDockedBottom | .MuiDrawer-paperAnchorDockedBottom | Styles applied to the Paper component if anchor="bottom" and variant is not "temporary". |
| modal | .MuiDrawer-modal | Styles applied to the Modal component. |
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.