Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Import#

import {
Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
} from '@nature-ui/core';

Usage#

Basic Drawer#

Editable Example

Drawer placement#

The Drawer can appear from any edge of the screen. Pass the placement prop and set it to top, right, bottom, or left.

Editable Example

With Sizes#

The size prop accepts one of xs, sm, md, lg, xl or full.

Editable Example

Focus on specific element#

When a form is in the drawer, you might need to set focus on a specific element when the drawer opens. Pass the initialFocusRef prop.

Without the initialFocusRef prop, the drawer will set focus on the first focusable element when it opens.

Editable Example

Accessibility#

  • When opening the Drawer, focus is trapped inside the Drawer.
  • By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
  • After the drawer closes, it'll return focus to the element that triggered it.

Props#

Drawer Props#

Drawer composes the Modal component with these extra props:

NameTypeDefaultDescription
isFullHeightbooleanfalseIf true and placement is set to top or bottom, the drawer fills the height of the viewport.
placementleft, right, top, bottomrightThe ref to the initial element to receive focus when the drawer opens.
sizexsxs, sm, md, lg, xl, full

Other components#

  • DrawerCloseButton composes CloseButton