Newskit Logo
About

Drawer

Overview

A Drawer is a panel that is used for navigation or filtering content. It can contain information and action items that relate to the current page a user is on.

Since a user can interact with a drawer without leaving the current page, tasks can be achieved more efficiently within the same context of the base UI.

Usage

Drawers are appropriate for five or more information and action items and should be used across breakpoints for a consistent user experience.

Props

childrenExclude<React.ReactNode, 'undefined'>
Sets the content of the Drawer panel.
openboolean = false
Whether the drawer is open
onDismissfunction
A callback which is invoked on dismissing the drawer through either, clicking the close icon button or overlay, or pressing the Esc key.
headerReact.ReactNode
If provided sets the content of the Drawer header.
placement'left'|'right' = left
Side of the screen which the drawer opens from.
restoreFocusToHTMLElemenet
Returns focus to the provided HTML element after the drawer is closed. If not provided, focus will return to the focused element prior to the drawer opening.
ariaLabelledbystring
Used to title the drawer. Single id or many space delimited ids referencing elements passed to the drawer header area.
ariaDescribedbystring
Used to describe the primary purpose or message of the drawer. Single id or many space delimited ids referencing elements passed to the drawer panel area.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
overlayobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the drawer overlay.
panelobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the drawer container.
sizeMQ<string>
If provided, this overrides the width of the drawer container when placed to the left or right.
maxSizeMQ<string>
If provided, this overrides the max-width property of the drawer container when placement is left or right.
minSizeMQ<string>
If provided, this overrides the min-width property of the drawer container when placement is left or right.
headerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the drawer header.
spaceInsetMQ<string>
If provided, this overrides the padding space set in drawer header container.
contentobject
spaceInsetMQ<string>
If provided, this overrides the padding space set in the drawer content container.
closeButtonobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the drawer close icon button.
spaceInsetMQ<string>
If provided, this overrides the padding space set in the close icon button.
Refer to the defaults below for the object structure:
{
  panel: {
    stylePreset: "drawerPanel",
    maxSize: "100%",
    minSize: "20px",
    size: {
      xs: "305px",
      sm: "309px",
      md: "310px",
      lg: "333px",
      xl: "354px"
    }
  },
  header: {
    spaceInset: "spaceInsetSquish040"
  },
  content: {
    spaceInset: "spaceInset050"
  },
  closeButton: {
    stylePreset: "iconButtonMinimalSecondary",
    spaceInset: "spaceInset020"
  }
}

Examples

Accessibility

  • Upon opening, focus will be transferred to the first interactive element.
  • In cases when you want to change the default focus behavior you need to add data-autofocus to an
    element and it should automatically get focus when the drawer opens. See the following example: {' '}
    <Drawer>
      <button>Click</button>
      <button data-autofocus>will be focused</button>
    </Drawer>