Drawer

The Drawer component slides a panel in from the edge of the screen. Use it for navigation, filters, or any content that does not need to take over the page.

Example

Import the Drawer component first to use it in your application. Here's a basic example demonstrating how to use the Drawer component:

Svelte 
<script>
  import { Drawer } from "theui-svelte";
</script>

<Drawer label="Open Drawer">
  <div class="p-8">
    Drawer content
  </div>
</Drawer>

In this example, the Drawer slides in from the left side of the screen which is the default behavior. The label prop creates the button that toggles the visibility of the Drawer. You can replace the content inside the Drawer with any elements you need.

Position

The position prop allows you to control where the Drawer appears on the screen. You can choose from four positions: top, end, bottom, or start. This flexibility lets you tailor the Drawer's placement to fit the layout and design of your application.

Set the position prop to change which edge the Drawer opens from.

Svelte 
<Drawer ... position="start">...</Drawer> <!-- Default position -->
<Drawer ... position="top">...</Drawer>
<Drawer ... position="end">...</Drawer>
<Drawer ... position="bottom">...</Drawer>

Fullscreen Drawer

Add the fullscreen attribute to make the Drawer cover the entire screen. It still slides in from the side set by the position prop. A fullscreen Drawer has no backdrop; use the close button or Escape to close it.

Svelte 
<Drawer label="Fullscreen" fullscreen>...</Drawer>

Trigger Customization

Use the buttonClasses prop to style the trigger created from the label prop. The classes are applied to the trigger button, or to the trigger wrapper when label is a snippet.

Svelte 
<Drawer label="Custom trigger" buttonClasses="bg-emerald-600 text-white rounded-full">...</Drawer>

Anything else you pass reaches the element itself, so a title, a data-* attribute or an event handler all work the way they would on a <div>. The id is the exception: the component sets its own so the trigger button can point at the panel with aria-controls.

Outlying Trigger

You can open or close the Drawer from outside by binding a reactive variable to its open prop. This is useful when the trigger button is placed elsewhere in your layout.

Svelte 
<script>
  let openDrawer: boolean = $state(false)
</script>

<!-- Outlaying button -->
<Button onclick={()=>openDrawer=!openDrawer}>Trigger drawer</Button>

<Drawer bind:open={openDrawer}>
  <!-- Drawer content -->
</Drawer>

The Button updates the openDrawer state, and the Drawer reacts to it. This allows full control from any part of your component.

Backdrop

Custom Backdrop Style

The Drawer includes a backdrop which is enabled by default. It can be toggled or styled using the backdrop prop. Set it to false to disable it, true for a default backdrop or provide a custom classes for styling.

Svelte 
<Drawer ... backdrop="bg-red-500">...</Drawer>

Preventing Backdrop Click

By default, the Drawer closes when the user clicks on the backdrop. This behavior helps users easily dismiss the Drawer by clicking outside of it, enhancing usability in most scenarios.

Set staticBackdrop to true and a click on the backdrop no longer closes it, which is what you want when the visitor is part way through something.

Svelte 
<Drawer ... staticBackdrop={true}>...</Drawer>

Disable Backdrop

If you prefer not to use a backdrop, you can easily disable it by setting the backdrop prop to false. This will remove the backdrop entirely from the Drawer component

Svelte 
<Drawer ... backdrop={false}>...</Drawer>

Animation Speed

The animationSpeed prop controls how quickly the Drawer appears or disappears. It supports the following values: "none", "slower", "slow", "normal", "fast" (default), and "faster".

Use it to set how fast the panel slides in and out.

Svelte 
<Drawer animationSpeed="slower" ...> ... </Drawer>
<Drawer animationSpeed="slow" ...> ... </Drawer>
<Drawer animationSpeed="normal" ...> ... </Drawer>
<Drawer animationSpeed="fast" ...> ... </Drawer>
<Drawer animationSpeed="faster" ...> ... </Drawer>
<Drawer animationSpeed="none" ...> ... </Drawer>

Accessibility

The Drawer component follows accessibility best practices:

  • The trigger element uses aria-controls and aria-expanded to describe its relationship with the Drawer. A string label is announced by its text; a snippet trigger uses aria-label from the ariaLabel prop.
  • Supports both text labels and custom elements, with keyboard interactions (Enter/Space key) for non-button triggers.
  • The Drawer container uses role="complementary" and references the trigger using aria-labelledby. Without a label, the Drawer panel gets aria-label from the ariaLabel prop instead.
  • aria-hidden is used to hide the Drawer from assistive technologies when it's not active.
  • When closed, the Drawer is marked inert, so its content can't be focused or reached with the keyboard.
  • The backdrop uses role="presentation" to avoid it being announced by screen readers.
  • Pressing Escape closes the open Drawer.
  • A visible and accessible Close button is included for easy dismissal.

Configuration