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

View Design

Status

Supported

Introduced

v3.0.0

View code

View Design

Interactive Demo

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

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

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

Anatomy

The Drawer contains four required elements and one optional element.

Item	Name	Description	Component
1	Overlay	Obscures the page content behind the panel	Overlay
2	Panel	Contains the Panel Header and Panel Content	Block
3	Header	An area to display content at the top of a panel eg a title	Block
4	Close Button	Icon Button for closing the Drawer	Icon Button
5	Content	An area to display any content eg a menu	Block

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.

Close Position

The position of the close button in the Drawer header is set to left as default for left placement, and right for right placement. For top and bottom placement, it is set to the right. Users have the option to set the close button position to either left or right for all four placements.

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.

Close Position

The position of the close button in the Drawer header is set to left as default for left placement, and right for right placement. For top and bottom placement, it is set to the right. Users have the option to set the close button position to either left or right for all four placements.

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

Order	Element	Role
1	header	Focusses to the content (children) passed to the header area, focusing on any interactive elements.
2	content	Focusses to the content (children) passed to the content area, focusing on any interactive elements.
3	closeButton	Focusses 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

Command	Description
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

Element	Attribute	Value	Description	User Supplied
drawer	ariaLabelledby	string	Defines the Aria-label of the Drawer
drawer	ariaDescribedby	string	Describes the purpose of the Drawer

SEO Considerations

Ensure all text, icons, and images are visible in the Drawer so that information can be crawled and indexed.
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.

Name	Type	Default	Description
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.
closePosition	left right	left	closePosition is set to left as default for left placement, and right for right placement. For top and bottom placement, it is set to the right. If provided, users can set the position of the close icon button.
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.
hideOverlay	boolean		If true, the overlay behind the drawer won't be shown and scrolling through the entire page will be enabled.
disableFocusTrap	boolean		If true, focus can leave the drawer window through tabbing or direct click on the main content.
inline	boolean		If true,the drawer will display inline using position absolute ( instead of fixed ) and will take the size of its container

Attribute	Type	Default	Description
overlay .stylePreset	MQ<string>	overlay	If provided, this overrides the style preset applied to the Overlay.
overlay .zIndex	number	70	If provided, this overrides the zIndex of the Overlay.
overlay .transitionPreset	string \| string[]	fade	If provided, this overrides the motions applied to the Overlay.
panel .stylePreset	MQ<string>	drawerPanel	If provided, this overrides the style preset applied to the Drawer panel.
panel .transitionPreset	string \| string[]	['fade', 'slideLeft']	If provided, this overrides the motions applied to the Drawer.
panel .size	MQ<string>	xs = 305px sm = 309px md = 310px lg = 333px xl =354px	If provided, this overrides the size of the Drawer panel when placed to the left or right. Can accept variable height or variable width depending on the orientation. (size = width for left/right Drawer \| size=height for top/bottom Drawer).
panel .maxSize	MQ<string>	100%	If provided, this overrides the max-size property of the Drawer panel. Can accept variable height or variable width depending on the orientation.
panel .minSize	MQ<string>	20px	If provided, this overrides the min-size property of the Drawer panel. Can accept variable height or variable width depending on the orientation.
panel .zIndex	number	80	If provided, this overrides the zIndex of the Drawer panel.
header .stylePreset	MQ<string>		If provided, this overrides the style preset applied to the Drawer header.
header .spaceInset	MQ<string>	spaceInsetSquish040	If provided, this overrides the padding space set in Drawer header content container.
content .spaceInset	MQ<string>	spaceInset050	If provided, this overrides the padding space set in the Drawer content container.
closeButton .stylePreset	MQ<string>	iconButtonMinimalSecondary	If provided, this overrides the style preset applied to the Drawer close Icon Button.
closeButton .spaceInset	MQ<string>	spaceInset020	If provided, this overrides the padding space set in the Drawer close Icon Button.

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.

Feature	Description	Status
Variations	Relevant variations (style, size, orientation etc.)
Interactive states	All interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behaviours	Guidelines for layout, animation, interactions, etc.
Usage guidelines	Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelines	Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelines	Conforms to best practice SEO techniques. SEO considerations defined.
Props	Details of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerations	Details on how this component may impact performance.
Available in UI kit	Included within Figma Web Gallery file.
Design specifications	Detailed design specification including sizing, spacing and design tokens defined.
Themes	Displays correctly across light and dark themes.

Drawer

Status

Introduced

Status

Introduced

Interactive Demo

Anatomy

Options

Placement

Close Position

Width

Height

Placement

Close Position

Width

Height

Behaviours

Animation

Triggering & Closing the Drawer

Content overflow

Disable page scrolling when launched

Animation

Triggering & Closing the Drawer

Content overflow

Disable page scrolling when launched

Usage

Do

Do not

Do

Do not

Accessibility Considerations

SEO Considerations

API

Compliance

Related Components

Need Help?

Need Help?