Drawer

A panel that slides out from the edge of the page can replace Modal to present more content.

Import

MainIndividual
import { Drawer } from 'rsuite';
  • Drawer The container of Drawer.
  • Drawer.Body The content of Drawer.
  • Drawer.Actions The action buttons of Drawer, usually placed in the header of Drawer. (optional)
  • Drawer.Header The header of Drawer, including the close button. (optional)
  • Drawer.Title The title of Drawer, usually placed in the header of Drawer. (optional)

Examples

Basic

Backdrop

Control the behavior of the Drawer's backdrop:

  • true: Show backdrop, and clicking it will close the Drawer
  • false: Do not show backdrop
  • 'static': Show backdrop, but clicking it will not close the Drawer

Placement

The Drawer can slide out from four directions: top, right, bottom, left.

Size

Set the width (or height, depending on the placement prop) of the Drawer using the size prop.

With Form

Place a form inside the Drawer, suitable for scenarios requiring user input.

Responsive

On mobile devices, the maximum width of the Drawer will fill the entire screen.

Accessibility

ARIA Attributes

  • The role attribute of the Drawer component is set to dialog.
  • Use the aria-labelledby attribute to associate with Drawer.Title.
  • Use the aria-describedby attribute to provide a description for Drawer.Body.

Keyboard Interaction

  • ESC can close the Drawer. This functionality can be disabled by setting keyboard=false.
  • Tab With enforceFocus enabled, moves through tabbable elements inside the Drawer; from the last element, wraps to the first.
  • Shift + Tab With enforceFocus enabled, moves backwards; from the first element, wraps to the last.
  • When the Drawer closes, focus returns to the element that triggered the Drawer to open.

Reduced motion

The default dialog animation, backdrop transition and static-backdrop shake follow the system's reduced-motion preference. Set reduceMotion={true} to force reduced motion or reduceMotion={false} to allow motion explicitly. A component setting overrides CustomProvider reduceMotion; transition callbacks are preserved.

A custom animation component keeps its existing contract and receives reduceMotion. Compose it with Animation.Transition and forward its child props/ref to use this policy. An opaque custom animation is responsible for its own visual effects and completion callbacks.

Props

<Drawer>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
autoFocus boolean (true) When set to true, the Drawer is opened and is automatically focused on its own, accessible to screen readers
backdrop boolean | 'static' When set to true, the Drawer will display the background when it is opened. Clicking on the background will close the Drawer. If you do not want to close the Drawer, set it to 'static'.
backdropClassName string Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".
classPrefix string ('drawer') The prefix of the component CSS class
closeButton ReactNode | boolean Custom close button, set to false to hide close button
container HTMLElement | (() => HTMLElement) Sets the rendering container
enforceFocus boolean (true) When set to true, Drawer will prevent the focus from leaving when opened, making it easier for the secondary screen reader to access
keyboard boolean close Drawer when press esc
onClose () => void Callback fired when Drawer hide
onEnter () => void Callback fired before the Drawer transitions in
onEntered () => void Callback fired after the Drawer finishes transitioning in
onEntering () => void Callback fired as the Drawer begins to transition in
onExit () => void Callback fired right before the Drawer transitions out
onExited () => void Callback fired after the Drawer finishes transitioning out
onExiting () => void Callback fired as the Drawer begins to transition out
onOpen () => void Callback fired when Drawer display
open * boolean Open Drawer
placement Placement(right) The placement of Drawer
reduceMotion boolean Reduce motion; omitted uses the provider or system preference
size 'xs' | 'sm' | 'md' | lg' | 'full' | number | string Set Drawer size

<Drawer.Header>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
classPrefix string ('modal-header') The prefix of the component CSS class
closeButton boolean (true) When set to true, a close button will be displayed
onClose (event) => void Callback function when clicking the close button
children ReactNode The content of the Header

<Drawer.Title>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
classPrefix string ('modal-title') The prefix of the component CSS class
children ReactNode The content of the Title

<Drawer.Actions>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
classPrefix string ('modal-actions') The prefix of the component CSS class
children ReactNode The content of the Actions

<Drawer.Body>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
classPrefix string ('modal-body') The prefix of the component CSS class
children ReactNode The content of the Body

Placement 

type Placement = 'top' | 'bottom' | 'right' | 'left';