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.

Drawer 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

Sometimes, you may want to trigger a Drawer from an external button or element. You can easily do this by using the same id to both the trigger and the target component. This binds them together, allowing the trigger to control the drawer's visibility.

This method is helpful when your open button is placed outside the main layout or when using custom controls. You can use any element as a trigger, as long as it shares the matching id.

Svelte 
<!-- Create the outlaying Label -->
<Drawer id="myDrawerID" label="Outlying Trigger" />

<!-- Create the drawer content -->
<Drawer id="myDrawerID">
  <div class="p-8">
    Outlying drawer content..
  </div>
</Drawer>

This example uses the same id="myDrawerID" in both Drawer components. The first one is the trigger with a label, and the second one contains the content. Sharing the same ID links them — clicking the trigger opens the content drawer.

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>

This example uses the same id="myDrawerID" in both Drawer components. The first one is the trigger with a label, and the second one contains the content. Sharing the same ID links them — clicking the trigger opens the content 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