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
Anatomy
The Drawer contains four required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
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
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
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:
| Order | Element | Role |
|---|
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.
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
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.
The Drawer has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
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 |
|---|