Drawer

The Drawer component is a versatile UI element that slides in from the edge of the screen, providing a convenient way to display additional content or navigation without disrupting the main view.

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 trigger snippet contains a 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.

Simply set the position prop to your desired value to change where the Drawer opens from, creating a more intuitive user experience based on your app's needs.

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

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 id="myDrawerID">
  <!-- 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.

However, for critical tasks, you can prevent this by setting the staticBackdrop prop to true, ensuring the Drawer stays open until manually closed.

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".

This gives you flexibility to adjust the opening and closing speed based on your design needs — whether you want a smooth, slow transition or a quick, snappy feel.

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, aria-expanded, and aria-label to describe its relationship with the Drawer.
  • 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.
  • aria-hidden is used to hide the Drawer from assistive technologies when it's not active.
  • The backdrop is marked with aria-hidden to avoid it being announced by screen readers.
  • A visible and accessible Close button is included for easy dismissal.

Configuration