91 lines
2.7 KiB
Markdown
91 lines
2.7 KiB
Markdown
|
---
|
||
|
|
productId: joy-ui
|
||
|
|
title: React Drawer component
|
||
|
|
components: Drawer, ModalClose, DialogContent
|
||
|
|
githubLabel: 'scope: drawer'
|
||
|
|
---
|
||
|
|
|
||
|
|
# Drawer
|
||
|
|
|
||
|
|
<p class="description">Navigation drawers provide quick access to other areas of an app without taking the user away from their current location.</p>
|
||
|
|
|
||
|
|
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
|
|
||
|
|
## Introduction
|
||
|
|
|
||
|
|
Drawers are commonly used as menus for desktop navigation, and as dialogs on mobile devices (similar to [Apple's sheets](https://developer.apple.com/design/human-interface-guidelines/sheets)).
|
||
|
|
|
||
|
|
{{"demo": "DrawerUsage.js", "hideToolbar": true, "bg": "gradient"}}
|
||
|
|
|
||
|
|
## Basics
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Drawer from '@mui/joy/Drawer';
|
||
|
|
```
|
||
|
|
|
||
|
|
The Drawer will close after the user makes a selection, clicks anywhere outside of it, or presses the <kbd class="key">Esc</kbd> key.
|
||
|
|
|
||
|
|
Use the `open` prop to control the toggling of the Drawer's open and close states, as shown in the demo below:
|
||
|
|
|
||
|
|
{{"demo": "DrawerBasic.js"}}
|
||
|
|
|
||
|
|
## Customization
|
||
|
|
|
||
|
|
### Anchor
|
||
|
|
|
||
|
|
Use the `anchor` prop to specify which side of the screen the Drawer should originate from.
|
||
|
|
The default value is `left`.
|
||
|
|
|
||
|
|
{{"demo": "DrawerAnchor.js"}}
|
||
|
|
|
||
|
|
### Size
|
||
|
|
|
||
|
|
Use the `size` prop to adjust the Drawer's width (when anchored to the left or right) or height (when anchored to the top or bottom).
|
||
|
|
|
||
|
|
{{"demo": "DrawerSize.js"}}
|
||
|
|
|
||
|
|
### Close button
|
||
|
|
|
||
|
|
Use the Modal Close component to add a close button to the Drawer that automatically handles the `onClick` event.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import ModalClose from '@mui/joy/ModalClose';
|
||
|
|
```
|
||
|
|
|
||
|
|
{{"demo": "DrawerCloseButton.js"}}
|
||
|
|
|
||
|
|
### Transition
|
||
|
|
|
||
|
|
Customize the Drawer's opening transition by using the CSS variables below inside the [`sx` prop](/system/getting-started/the-sx-prop/):
|
||
|
|
|
||
|
|
- `--Drawer-transitionFunction`: the [transition function](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-timing-function); default is `ease`.
|
||
|
|
- `--Drawer-transitionDuration`: the [duration of the transition](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-duration); default is `0.3s`.
|
||
|
|
|
||
|
|
{{"demo": "DrawerTransition.js"}}
|
||
|
|
|
||
|
|
### Scrollable content
|
||
|
|
|
||
|
|
Use the Dialog Content component to create a scrollable container inside the Drawer.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import DialogContent from '@mui/joy/DialogContent';
|
||
|
|
```
|
||
|
|
|
||
|
|
{{"demo": "DrawerScrollable.js"}}
|
||
|
|
|
||
|
|
## Common examples
|
||
|
|
|
||
|
|
### Mobile navigation
|
||
|
|
|
||
|
|
A common use case for the Drawer is to build mobile-friendly navigation menus:
|
||
|
|
|
||
|
|
{{"demo": "DrawerMobileNavigation.js"}}
|
||
|
|
|
||
|
|
### Inset drawer
|
||
|
|
|
||
|
|
An inset drawer is a panel that's not anchored to any edge of the screen.
|
||
|
|
|
||
|
|
You can achieve this by applying background and padding values to the Drawer component, and using either a Box or [Sheet](/joy-ui/react-sheet/) component for a full-height wrapper, as shown below:
|
||
|
|
|
||
|
|
{{"demo": "DrawerFilters.js"}}
|