Drawer

Drawer lets you create accessible drawers that slide in and out 🙃.

This makes Drawers really easy to use

You just have to specify an id for the Drawer to get started.

<DrawerTrigger target="drawer"> ... </DrawerTrigger>
<DrawerContent id="drawer"> ... </DrawerContent>

<DrawerTrigger target="drawer" client:load> ... </DrawerTrigger>
<DrawerContent id="drawer" client:load> ... </DrawerContent>

Use a custom layout for your close button

We don’t force you into a predefined layout in your drawer content so you can put your custom close button anywhere you desire.

<DrawerContent id="drawer">
  <div class="flex items-center gap-4">
    <div>Drawer Content</div>
    <DrawerCloseButton />
  </div>
</DrawerContent>

<DrawerContent id="drawer" client:load>
  <div class="flex items-center gap-4">
    <div>Drawer Content</div>
    <DrawerCloseButton client:load />
  </div>
</DrawerContent>

Drawers that can show up from any side

Drawers can be placed on the top, bottom, left, and right of the screen. Just add placement to DrawerContent to change its placement.

<DrawerContent
  id="drawer"
  options={{placement: 'top'}}
>
  ...
</DrawerContent>

Ultra versatile, since Drawers can be placed in various positions

You can use static, absolute, and fixed to adjust how drawers show up.

static is good for disclosure
absolute is great for megamenus
fixed is awesome for sitewide navigation

<DrawerContent
  id="drawer"
  options={{position: 'static'}}
>
  ...
</DrawerContent>

Actually accessible (not just claiming to be)

Drawer designed to be as accessible as possible from the get-go. Allow us to explain what these features are.

First — the most basic — you can close the drawer by clicking outside or with the Esc button)

Try it by opening the drawer and press the Esc button!

Impeccable focus management

Unlike many other drawer components, Drawer helps you focus on the right thing at the right time.

When opening: Focus is placed on DrawerContentso keyboard users and screen readers can start interacting with it immediately.
When closing: Focus is placed on DrawerTrigger so keyboard and screen reader users navigate to the next item without using a mouse.
Inside DrawerContent: Focus is handled differently depending on its position. For more details, see the accessibility tab.

Get a feel of how we handle focus by tabbing through these drawers

The right roles and the right labels

Drawers are usually dialogs so we built them with an implict dialog role. (This can be changed if you wish to).

And since dialogs need accessible names, we also built-in an accessibility warning and wrote a section to help you understand how to create these names.

An accessibility warning

Warning about missing accessible name for a drawer.

As you can see, we are pretty serious about accessibility!

Basic Usage

A basic drawer can be created with DrawerTrigger and DrawerContent.

When creating a drawer, you need to pass the same value to the trigger’s target and content’s id property.

<script>
  import { DrawerTrigger, DrawerContent } from '@splendidlabz/svelte'
</script>

<DrawerTrigger target="drawer">Menu</DrawerTrigger>
<DrawerContent id="drawer">Drawer Content</DrawerContent>

---
import { DrawerTrigger, DrawerContent } from '@splendidlabz/svelte'
---

<DrawerTrigger target="drawer" client:load>Menu</DrawerTrigger>
<DrawerContent id="drawer" client:load>Drawer Content</DrawerContent>

Close Button

You can create a close button with DrawerCloseButton.

<script>
  import {
    DrawerTrigger,
    DrawerContent,
    DrawerCloseButton,
  } from '@splendidlabz/svelte'
</script>

<DrawerTrigger target="drawer">Menu</DrawerTrigger>
<DrawerContent id="drawer">
  <div class="Horizontal items-center">
    <div>Content header</div>
    <DrawerCloseButton />
  </div>
  <div>Content</div>
</DrawerContent>

---
import {
  DrawerTrigger,
  DrawerContent,
  DrawerCloseButton,
} from '@splendidlabz/svelte'
---

<DrawerTrigger target="drawer" client:load>Menu</DrawerTrigger>
<DrawerContent id="drawer" client:load>
  <div class="Horizontal items-center">
    <div>Content header</div>
    <DrawerCloseButton client:load />
  </div>
  <div>Content</div>
</DrawerContent>

Tip

Use Splendid Layouts to create a layout for your drawer content easily.

Random ID

If you do not wish to manually name the id and target properties, you can use randomString from Splendid Utils to create a DOM-ready random string. This can make things a tiny bit easier for you.

<script>
  import { DrawerTrigger, DrawerContent } from '@splendidlabz/svelte'
  import { randomString } from '@splendidlabz/utils'
  const id = randomString()
</script>

<DrawerTrigger target={id}>Menu</DrawerTrigger>
<DrawerContent {id}>Drawer Content</DrawerContent>

---
import { DrawerTrigger, DrawerContent } from '@splendidlabz/svelte'
import { randomString } from '@splendidlabz/utils'
const id = randomString()
---

<DrawerTrigger target={id} client:load>Menu</DrawerTrigger>
<DrawerContent {id} aria-label="Drawer Content" client:load
  >Drawer Content</DrawerContent
>

Drawer Trigger

DrawerTrigger creates a trigger button that opens DrawerContent when clicked.

Content that is passed into DrawerTrigger will be rendered inside a button element.

<DrawerTrigger target="drawer">Menu</DrawerTrigger>

<DrawerTrigger target="drawer" client:load>Menu</DrawerTrigger>

Using Icon

If you pass icon to DrawerTrigger without any content, it will render an icon with SVG.

<DrawerTrigger ... icon="ph:hamburger" />

<DrawerTrigger ... icon="ph:hamburger" client:load />

Use SVG to if you want to create a button with both text and icon.

<DrawerTrigger target="drawer">
  <span>Menu</span>
  <SVG icon="ph:hamburger" />
</DrawerTrigger>

<DrawerTrigger target="drawer" client:load>
  <span>Menu</span>
  <SVG icon="ph:hamburger" client:load />
</DrawerTrigger>

Show

If you want to show the drawer by default (great for debugging purposes), you can set show to true.

<DrawerTrigger ... show={true}>Menu</DrawerTrigger>

<DrawerTrigger ... show={true} client:load>Menu</DrawerTrigger>

Other options

DrawerTrigger is built on top of DisclosureTrigger and inherits all of its options. In addition to the above properties, you can pass other DisclosureTrigger properties into DrawerTrigger.

All other unnamed properties will be passed directly to the underlying button element.

Drawer Content

DrawerContent contains the content that should be hidden within the drawer. It is shown when DrawerTrigger gets clicked.

There are multiple accessible ways to dismiss DrawerContent.

Placements

DrawerContent can be placed on the top, bottom, left, and right of the screen. To change the placement, add the placement option to DrawerContent.

Placements can only be used when position is absolute or fixed.

<DrawerContent id="drawer" options={{ placement: 'right' }}>
  Drawer Content
</DrawerContent>

<DrawerContent id="drawer" options={{ placement: 'right' }} client:load>
  Drawer Content
</DrawerContent>

Positions

The default position for DrawerContent is fixed, but you can change it to absolute or static. These behave the same way as the CSS position property.

static - drawer content is placed in the normal document flow
absolute - drawer content is placed relative to the nearest ancestor with position: relative.
fixed - drawer content is placed relative to the nearest stacking context.

<DrawerContent id="drawer" options={{ position: 'absolute' }}>
  Drawer Content
</DrawerContent>

<DrawerContent id="drawer" options={{ position: 'absolute' }} client:load>
  Drawer Content
</DrawerContent>

Tip

DrawerContent with absolute position is great for creating mega-menus!

Portal

By default, DrawerContent will be portalled out of their default DOM locations and inserted as a direct descendant of the <body> element. This prevents DrawerContent from being cut-off by elements with overflow: hidden.

If you wish to disable this behaviour, set the portal option to false. (This is how we contained fixed position drawers in our demos).

<DrawerContent id="drawer" options={{ portal: false }}>
  Drawer Content
</DrawerContent>

<DrawerContent id="drawer" options={{ portal: false }} client:load>
  Drawer Content
</DrawerContent>

Scroll To Anchor

When DrawerContent opens, you can ask it to automatically scroll to the current anchor (an <a> element with href matching the current URL hash).

To see an example of this, open this page on your mobile browser and open the submenu. DrawerContent will automatically scroll to Drawer.

<DrawerContent id="drawer" options={{ scrollToAnchor: true }}>
  ... Other content ...
  <a href="#url-hash"> Anchor </a>
</DrawerContent>

<DrawerContent id="drawer" options={{ scrollToAnchor: true }} client:load>
  ... Other content ...
  <a href="#url-hash"> Anchor </a>
</DrawerContent>

Other options

Drawer is built on top of Disclosure and inherits all of its options. In addition to the above properties, you can pass other DisclosureContent properties into DrawerContent.

Events

DrawerContent emits the following events:

open - emitted when the DrawerContent is opened
close - emitted when the DrawerContent is closed

<script>
  function opened()  { /* Do something */}
  function closed () { /* Do something */}
</script>

<DrawerContent on:open={opened} on:close={closed}> ... </DrawerContent>

Drawer Close Button

DrawerCloseButton creates a button that closes the drawer when clicked. It should be used inside DrawerContent.

Custom Icon

DrawerCloseButton uses Tabler’s x icon by default.

If you wish to change the icon, simply set the icon property to your desired icon. See SVG for more information on using icon.

<DrawerCloseButton icon="ph:x"/>

<DrawerCloseButton icon="ph:x" client:load />

Custom Content

Like DrawerTrigger, you can insert HTML into DrawerCloseButton if you wish to create a custom close button.

<DrawerCloseButton>Close</DrawerCloseButton>

<DrawerCloseButton client:load>Close</DrawerCloseButton>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Intro

Drawer is built on top of Disclosure and inherits all its accessibility features. For your convenience, we have listed some of the most important features and how to use them here.

Closing and dismissing

Users can dismiss the drawer via three main ways:

Clicking^* on the close button
Clicking outside DrawerContent
Using the Esc key

^*: “Clicking” includes using Enter and Space keys because we used the standard <button> element.

You can disable the second and third dismissal methods by setting their respective options to false:

<DrawerContent
  id="drawer"
  options={{
    closeOnOutsideClick: false,
    closeOnEscapeButton: false,
  }}
>
  <!-- Drawer content goes here -->
</DrawerContent>

<DrawerContent
  id="drawer"
  options={{
    closeOnOutsideClick: false,
    closeOnEscapeButton: false,
  }}
  client:load
>
  {/* Drawer content goes here */}
</DrawerContent>

Focusing

This section covers how Drawer handles focus.

Focusing when opening

When DrawerContent opens, it will automatically be focused, so keyboard users and screen readers can start interacting with it immediately.

Open the drawer and press the Tab key to try it out!

You can direct focus onto the first item instead DrawerContent by specifying focusTargetWhenOpening to first.

<DrawerContent id="drawer" options={{ focusTargetWhenOpening: 'first' }}>
  Drawer Content
</DrawerContent>

<DrawerContent
  id="drawer"
  options={{ focusTargetWhenOpening: 'first' }}
  client:load
>
  Drawer Content
</DrawerContent>

Focusing when closing

If a user closes DrawerContent with the Esc key or by clicking on DrawerCloseButton, we will focus on the DrawerTrigger. This lets keyboard and screen reader users navigate to the next item without using a mouse.

To disable this behaviour, you can set focusTriggerOnClose to false:

<DrawerContent id="drawer" options={{ focusTriggerOnClose: false }}>
  Drawer Content
</DrawerContent>

<DrawerContent id="drawer" options={{ focusTriggerOnClose: false }} client:load>
  Drawer Content
</DrawerContent>

Focus Management

DrawerContent handles internal focus differently depending on its position. By default, the following applies:

fixed position: DrawerContent will trap focus.
absolute or static positions: DrawerContent will manage focus.

When focus is trapped, users will not be able to Tab or Shift + Tab out of DrawerContent.

Open the drawer and try it: You can’t Tab out of drawer content.

When focus is managed, users will be able to tap out of DrawerContent, but the following applies:

When Tab out: DrawerContent will close, and focus goes to the next item after DrawerTrigger.
When Shift + Tab out: DrawerContent will not close, and focus goes to DrawerTrigger.

We built this behaviour because it seems to be most sensible for screen readers and keyboard users.

Aria stuff to know

Changing role

Drawers are dialogs so we have set DrawerContent’s role to dialog. At the same time, we have also set DrawerTrigger’s aria-haspopup to dialog to match the role value.

If you want to change the aria-haspopup and role, you can pass them into their respective components.

<DrawerTrigger target="drawer" aria-haspopup="menu">...</DrawerTrigger>
<DrawerContent id="drawer" role="menu">...</DrawerContent>

<DrawerTrigger target="drawer" aria-haspopup="menu" client:load>
  ...
</DrawerTrigger>
<DrawerContent id="drawer" role="menu" client:load>...</DrawerContent>

Labeling

Labelling DrawerTrigger is optional if the text within it is clear enough. However, since DrawerContent is a dialog, it must have an accessible name.

You can use aria-label or aria-labelledby to give both components accessible names.

<DrawerTrigger
  target="drawer"
  aria-label="Open navigation menu"
  icon="ph:hamburger"
/>
<DrawerContent id="drawer" aria-label="Navigation Menu">...</DrawerContent>

<DrawerTrigger
  target="drawer"
  aria-label="Open navigation menu"
  icon="ph:hamburger"
  client:load
/>
<DrawerContent id="drawer" aria-label="Navigation Menu" client:load>
  ...
</DrawerContent>

The default accessible name for DrawerCloseButton is “Close dialog”. If you want to change it, you can use aria-label as well.

<DrawerCloseButton aria-label="Close navigation menu" />

<DrawerCloseButton aria-label="Close navigation menu" client:load />

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

You can import the basic styles for Drawer through Splendid Styles.

@use '@splendidlabz/styles';

@import '@splendidlabz/styles/css';

HTML Output

Drawer Trigger

DrawerTrigger produces the following output:

<button ... class="Button DrawerTrigger">...</button>

If you used icon and did not provide any HTML into the default slot, DrawerTrigger will produce the following output:

<button ... class="Button DrawerTrigger">
  <svg>...</svg>
</button>

Drawer Content

DrawerContent produces the following output in fixed position.

<div class="DrawerBackdrop DrawerBackdrop-blur">
  <div class="DrawerContent">...</div>
</div>

In static and absolute positions, DrawerContent does not include the DrawerBackdrop element.

<div class="DrawerContent">...</div>

Drawer Close Button

DrawerCloseButton produces the following HTML:

<button class="DrawerCloseButton Button-icon">
  <svg>...</svg>
</button>

If content is passed into DrawerCloseButton, the content will replace the <svg> element.

<button class="DrawerCloseButton Button-icon">...</button>

Classes and Properties

Drawer Trigger

The following classes are used by DrawerTrigger

Class	Description
`Button`	Generic styles used for buttons. See `Button`.
`DrawerTrigger`	Styles for drawer trigger

These properties can be used to add classes to DrawerTrigger.

Class	Description
`class`	Adds classes to the button
`iconClass`	Adds classes to icon

Drawer Content

The following classes are used by DrawerContent

Class	Description
`DrawerBackdrop`	Styles the backdrop.
`DrawerBackdrop-blur`	Blurs the backdrop
`DrawerContent`	Styles the content

These properties can be used to add classes to DrawerContent.

Class	Description
`backdropClass`	Adds classes to backdrop
`class`	Adds classes to the content

Drawer Close Button

The following classes are used by DrawerCloseButton

Class	Description
`Button-icon`	Generic styles used for button icons. See `Button`.
`DrawerCloseButton`	Styles for the close button

These properties can be used to add classes to DrawerCloseButton.

Class	Description
`class`	Adds classes to the button
`iconClass`	Adds classes to icon

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Drawer Trigger

Properties

You can provide the following properties to DrawerTrigger.

Property	Type	Description
`target`	`string`	`id` of the `DrawerContent`. Required.
`show`	`boolean`	Position of the drawer. Default is `fixed`.
`aria-haspopup`	`string`	`aria-haspopup` value. Default is `dialog`.
`icon`	`string`	Icon to use when content is not passed into default slot. See `SVG`.
`options`	`object`	Additional options. This inherits from `DisclosureTrigger`.

Drawer Content

Properties

You can provide the following properties to DrawerContent.

Property	Type	Description
`id`	`string`	`id` of `DrawerContent`. Required.
`role`	`boolean`	Role for the drawer content
`options`	`object`	Additional options. See `Options` below.

Options

DrawerContent has these options:

Property	Enum	Description
`position`	`static` `absolute` `fixed`	Position of the drawer. Default is `fixed`
`placement`	`top` `bottom` `left` `right`	Placement of the drawer.
`...`		Other `DisclosureContent` options

DrawerContent contains different default options based on its position:

const staticOptions =  {
  placement: 'top',
  closeOnOutsideClick: false,
  closeOnEscapeButton: false,
}

const absoluteOptions = {
  placement: 'top',
}

const fixedOptions: {
  placement: 'left',
  focusManagement: 'trap',
  preventBodyScroll: true,
}

Drawer Close Button

Properties

You can provide the following properties to DrawerCloseButton.

Property	Type	Description
`icon`	`string`	Icon to use when content is not passed into default slot. See `SVG`.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.