Skip to content

Drawer

Drawer

The drawer component is a modal sidebar built on top of the native <dialog> element. It provides a smooth sliding animation and a seamless user experience across both desktop and mobile devices. The default implementation slides in from the left when opened and snaps closed when dismissed. It includes a semi-transparent blurred background and can be closed using the ESC key or by clicking on the background. The drawer is fully accessible with ARIA attributes and supports both mouse and keyboard navigation.

Complete Drawer with Button Example

<button
  class="skin-primary-emphasised interactive btn"
  onclick="backdropDrawer.showModal()"
  aria-haspopup="dialog"
>
  Open Drawer
</button>

<dialog
  id="backdropDrawer"
  class="drawer"
  role="dialog"
  aria-modal="true"
  aria-labelledby="simple-drawer-title"
  aria-describedby="backdrop-drawer-content"
>
  <form
    method="dialog"
    class="drawer-backdrop-click wrapper"
    aria-hidden="true"
  >
    <button aria-hidden="true" tabindex="-1" aria-label="Close Drawer"></button>
  </form>
  <div class="drawer-box skin">
    <form method="dialog" class="drawer-control-bar">
      <button class="drawer-close-button">
        <span>Close</span>
        <span aria-hidden="true">✕</span>
      </button>
    </form>
    <h3 id="simple-drawer-title" class="text-lg font-semibold">
      Simple Drawer
    </h3>
    <div id="backdrop-drawer-content">
      This Drawer opens with a transition from the left and can be closed with
      ESC key or by clicking the background
    </div>
  </div>
</dialog>
<button
  class="skin-primary-emphasised interactive btn"
  onclick="backdropDrawer.showModal()"
  aria-haspopup="dialog"
>
  Open Drawer
</button>

<dialog
  id="backdropDrawer"
  class="drawer"
  role="dialog"
  aria-modal="true"
  aria-labelledby="simple-drawer-title"
  aria-describedby="backdrop-drawer-content"
>
  <form
    method="dialog"
    class="drawer-backdrop-click wrapper"
    aria-hidden="true"
  >
    <button aria-hidden="true" tabindex="-1" aria-label="Close Drawer"></button>
  </form>
  <div class="drawer-box skin">
    <form method="dialog" class="drawer-control-bar">
      <button class="drawer-close-button">
        <span>Close</span>
        <span aria-hidden="true">✕</span>
      </button>
    </form>
    <h3 id="simple-drawer-title" class="text-lg font-semibold">
      Simple Drawer
    </h3>
    <div id="backdrop-drawer-content">
      This Drawer opens with a transition from the left and can be closed with
      ESC key or by clicking the background
    </div>
  </div>
</dialog>

The styling of the base drawer is defined by the following variables. As with all components, they will use these default values, but can be redefined within your main css file.

Variable	Default Value	Description
`--drawer-backdrop-color`	`rgba(0, 0, 0, 0.3)`	Color and opacity of the drawer backdrop
`--drawer-backdrop-blur`	`4px`	Blur effect intensity for the backdrop
`--drawer-width-min`	`320px`	Minimum width of the drawer container
`--drawer-width-max`	`80vw`	Maximum width of the drawer container
`--drawer-margin`	`2rem`	Margin around the drawer on desktop
`--drawer-padding`	`2rem`	Internal padding of the drawer content
`--drawer-mobile-padding`	`1rem`	Internal padding on mobile devices
`--drawer-mobile-margin`	`0rem`	Margin around the drawer on mobile
`--drawer-mobile-max-width`	`80vw`	Maximum width of the drawer container on mobile
`--drawer-hero-width`	`18rem`	Width of hero content area in drawer
`--drawer-mobile-hero-height`	`150px`	Height of hero content area on mobile
`--drawer-animation-speed`	`var(--duration-speed-slow)`	Duration of drawer animations and transitions
`--drawer-radius`	`var(--radius-site)`	Border radius of the drawer corners
`--drawer-shadow`	`var(--shadow-site)`	Shadow effect for the drawer box
`--drawer-shadow-mobile`	`var(--shadow-site)`	Shadow effect for the drawer box on mobile

Accessibility

The drawer is built following the WAI-ARIA Modal Dialog Pattern, implementing key accessibility features through semantic HTML and ARIA attributes.

Current Implementation Features

Closing animation

The current snap-close implementation can only be further customised with the use of Javascript and the HTMLDialogElement: showModal() method.

Structure and Labeling

Each Drawer includes:

The role="dialog" attribute to identify it as a modal dialog
aria-modal="true" to indicate it’s a modal context
aria-label to provide an accessible name for the drawer
aria-controls on trigger buttons to associate them with their respective drawers

Keyboard Support

The native HTML <dialog> element provides:

ESC key to close the drawer
Tab key to navigate through focusable elements
Automatic focus management within the drawer

The drawer includes:

Clear labeling of all interactive elements
Proper content organization
Hidden decorative elements using aria-hidden="true"
Descriptive button labels for actions and close buttons

Mobile Accessibility

For mobile devices:

Clear close mechanisms (either close button or backdrop)
Touch-friendly target sizes
Maintained content structure

Required Implementation Steps

When implementing drawers in your project, ensure you:

Content Structure

Use semantic HTML elements for content structure
Include descriptive text for all buttons and interactive elements
Maintain proper focus management

Javascript must be used to entirely trap the focus within the drawer. In some browsers such as Chrome, when the user has reached the end of the drawer, tabbing again will move focus to the browsers toolbar. In order to make the drawer as accessible as possible, it should ignore the tool bar and go back to the start of the drawer’s index.

ARIA Attributes

Add appropriate aria-label value to the dialog element
Include aria-controls on trigger buttons
Add descriptive aria-label values for action buttons
Use aria-hidden="true" for decorative elements