Drawer API
The API documentation of the Drawer React component. Learn more about the props and the CSS customization points.
Import
import Drawer from '@material-ui/core/Drawer';
// or
import { Drawer } from '@material-ui/core';You can learn more about the difference by reading this guide.
The props of the Modal component are available
when variant="temporary" is set.
Component name
The MuiDrawer name can be used for providing default props or style overrides at the theme level.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| anchor | 'bottom' | 'left' | 'right' | 'top' |
'left' | Side from which the drawer will appear. |
| children | node | The contents of the drawer. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| elevation | number | 16 | The elevation of the drawer. |
| 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 drawer is open. |
| PaperProps | object | {} | Props applied to the Paper element. |
| SlideProps | object | Props applied to the Slide element. |
|
| 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.
Any other props supplied will be provided to the root element (native 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 thanks to one of these customization points:
- With a rule name of the
classesobject prop. - With a global class name.
- With a theme and an
overridesproperty.
If that's not sufficient, you can check the implementation of the component for more detail.