Newskit Logo
About

Layout

Drawer

A Drawer is a layout panel that slides out the side of the screen revealing content like navigation or filters.

Status

Supported

Introduced

v3.0.0
View code

Status

Supported

Introduced

Interactive Demo

This demo allows you to preview the Drawer component, its variations, and configuration options.

open
placement
import React from 'react';
import { Drawer } from 'newskit';

export default () => <Drawer placement="left" header="" />;

Anatomy

The Drawer contains four required elements and one optional element.

ItemNameDescriptionComponentOptional
1
OverlayObscures the page content behind the panel
Overlay
2
PanelContains the Panel Header and Panel Content
Block
3
HeaderAn area to display content at the top of a panel eg a title
4
Close ButtonIcon Button for closing the Drawer
5
ContentAn area to display any content eg a menu

Options

The Drawer has options that can be used to provide an appropriate experience for different use cases.

Placement

The Drawer can appear from the left (default), right, top, or bottom of the screen. When appearing from the left or right of the screen, the close Icon Button is positioned on the same side where the Drawer originates from. When appearing from the top or bottom of the screen, the close Icon Button is positioned on the right as default.

Width

When the placement of the Drawer is set to either left or right, the width of a Drawer can be customised appropriately, with the height being 100%.

Height

When the placement of the Drawer is set to either top or bottom, the height of a Drawer can be customised appropriately, with the width being 100%.

Placement

The Drawer can appear from the left (default), right, top, or bottom of the screen. When appearing from the left or right of the screen, the close Icon Button is positioned on the same side where the Drawer originates from. When appearing from the top or bottom of the screen, the close Icon Button is positioned on the right as default.

Width

When the placement of the Drawer is set to either left or right, the width of a Drawer can be customised appropriately, with the height being 100%.

Height

When the placement of the Drawer is set to either top or bottom, the height of a Drawer can be customised appropriately, with the width being 100%.

Behaviours

The following guidance describes how the Drawer component behaves.

Animation

When the Drawer is launched, the overlay fades in from 0% to 100% opacity (transitions) and the Drawer panel slides in from the edge of the screen (transforms:translate the x or y axis). When the Drawer is dismissed, the same animation in reverse occurs.

Triggering & Closing the Drawer

The Drawer visibility is controlled via the open prop on the component, hidden by default. To handle closing the Drawer the user will need to supply and handle via the onDismiss callback. This will be triggered when the user clicks on the close Icon Button, the overlay, or by pressing the Esc keyboard key.

Content overflow

When the content is too long to fit, content overflows and Scroll is applied. The header becomes fixed and the content can then independently scroll to bring overflowed content into view.

Disable page scrolling when launched

When a Drawer is present the content behind is not scrollable (scroll-locked).

Animation

When the Drawer is launched, the overlay fades in from 0% to 100% opacity (transitions) and the Drawer panel slides in from the edge of the screen (transforms:translate the x or y axis). When the Drawer is dismissed, the same animation in reverse occurs.

Triggering & Closing the Drawer

The Drawer visibility is controlled via the open prop on the component, hidden by default. To handle closing the Drawer the user will need to supply and handle via the onDismiss callback. This will be triggered when the user clicks on the close Icon Button, the overlay, or by pressing the Esc keyboard key.

Content overflow

When the content is too long to fit, content overflows and Scroll is applied. The header becomes fixed and the content can then independently scroll to bring overflowed content into view.

Disable page scrolling when launched

When a Drawer is present the content behind is not scrollable (scroll-locked).

Usage

The following guidance describes how and when to appropriately use a Drawer component.

Do

Drawers are appropriate for navigation, for filtering content, or for use in checkout flows.

Do not

Avoid using Drawers for top-level navigation items when there is space for them to be exposed on larger screens.

Do

Drawers should be in close proximity to the content it’s attributed to.

Do not

Avoid nesting tiered Drawers to prevent usability issues. Consider using an alternative component such as an Accordion or rethink the page structure.

Accessibility Considerations

The Drawer has the following accessibility considerations:

Focus order
OrderElementRole
1
headerFocusses to the content (children) passed to the header area, focusing on any interactive elements.
2
contentFocusses to the content (children) passed to the content area, focusing on any interactive elements.
3
closeButtonFocusses to the close Icon Button in the header.

Upon opening, focus will be transferred to the first interactive element in the specified order ie if there are interactive elements passed to the header, then this will be the first focusable element.

If you want to change the element that gets focus then add a data-autofocus attribute to the HTML element you want to be focused on.

Keyboard Interactions
CommandDescription
Tab
When the Drawer is active it will maintain focus trapping. The user will only be able to tab through it and its children.
Shift
Tab
When the Drawer is active it will maintain focus trapping. The user will only be able to tab through it and its children.
Esc
Closes the Drawer and overlay.
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
drawer

ariaLabelledby

string

Defines the Aria-label of the Drawer
drawer

ariaDescribedby

string

Describes the purpose of the Drawer

SEO Considerations

  1. Ensure all text, icons, and images are visible in the Drawer so that information can be crawled and indexed.
  2. The Drawer component and its content are rendered to the DOM, but only visible to the user when the Drawer is open.

API

The Drawer has a range of props that can be used to define an appropriate experience for different use cases.

Props

The Drawer has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children

React.ReactNode

Content to be rendered inside the Drawer panel content area.
open

boolean

false

Defines if the Drawer is open.
onDismiss

function

If provided, a callback which is invoked on dismissing the Drawer through either clicking the close Icon Button, overlay, or pressing the Esc key.
header

React.ReactNode

If provided, sets the content of the Drawer header.
placement

left

right

top

bottom

left

Defines the edge of the screen from which the Drawer enters and exits from.
restoreFocusTo

HTMLElement

If provided, returns focus to the specified element after the Drawer is closed. If not provided, focus will return to the focused element prior to the Drawer opening.

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?