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:
<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.
<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.
<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.
<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.
<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
<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.
<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
, andaria-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 usingaria-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.