Newskit Logo
Newskit Logo
View Github

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

v3.0.0

Interactive Demo

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

open
placement
closePosition
hideOverlay
inline
1import React from 'react';
2import { Drawer } from 'newskit';
3
4export default () => (
5  <Drawer placement="left" header="" hideOverlay inline />
6);
7

Anatomy

The Drawer contains four required elements and one optional element.

ItemNameDescriptionComponentOptional

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.

Note

The header and close button are optional. However it‘s recommended that a close button is always used to adhere to aria-principles.

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.

Note

The header and close button are optional. However it‘s recommended that a close button is always used to adhere to aria-principles.

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.

Don’t

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.

Don’t

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

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
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

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

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

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?