# 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:
```html
Drawer content
```
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.
```html
............
```
## 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.
```html
...
```
## 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.
```html
...
```
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 `
`. 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.
```html
```
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.
```html
...
```
### 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.
```html
...
```
### 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
```html
...
```
## 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.
```html
... ... ... ... ... ...
```
## 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
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | string \| Snippet | `undefined` | The label or trigger content for the Drawer component. A string renders as plain text; use a Snippet for markup. |
| `position` | 'top' \| 'end' \| 'bottom' \| 'start' | `start` | Drawer position relative to screen. |
| `open` | boolean | `false` | Controls the visibility of the Drawer. Bindable: use bind:open to programmatically open or close the Drawer. |
| `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `fast` | Speed of the animation when the component is shown or hidden. |
| `backdrop` | boolean \| string | `true` | Toggle or style the Drawer backdrop. |
| `staticBackdrop` | boolean | `false` | Prevent Drawer from closing on backdrop click. |
| `buttonClasses` | string | - | Classes for the drawer trigger button. |
| `ariaLabel` | string | `Drawer` | Accessible name used when the trigger is a snippet (set on the trigger), or when there is no `label` (set on the Drawer panel). A string `label` uses its own text as the name. |
### Dynamic props
| Name | Description |
| --- | --- |
| `fullscreen` | Use the fullscreen prop to make the Drawer component take up the entire screen. |
| `class` | Any CSS classes used in the class prop will be applied to the Drawer body directly. It will override the default classes. |
### Snippets
| Name | Description |
| --- | --- |
| `children` | Main content of the component. |
| `label` | The element that triggers the opening of the component. |
---
Category: Components
Keywords: drawer, sidebar, slide-in, navigation, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt