Drawer

Side panel that slides in from the edge of the screen. Perfect for navigation menus and additional content.

Installation

Import

import { Drawer } from '@svelte-atoms/core/drawer';

Preset Configuration

Customize the drawer appearance using presets

You can customize the default styles for Drawer components by defining presets in your configuration:

Examples

Explore different drawer variations

Right Drawer

Default drawer sliding from right

Code

<script lang="ts">
  let open = $state(false);
</script>

<button onclick={() => open = true}>Open Drawer</button>

<Drawer.Root bind:open>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
    </Drawer.Header>
    <p>Drawer content goes here.</p>
    <Drawer.Footer>
      <button onclick={() => open = false}>Close</button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Left Drawer

Drawer from left side

Code

<Drawer.Root bind:open side="left">...</Drawer.Root>
<Drawer.Root bind:open side="right">...</Drawer.Root>
<Drawer.Root bind:open side="top">...</Drawer.Root>
<Drawer.Root bind:open side="bottom">...</Drawer.Root>

API Reference

Drawer.Root Props

Prop

Type

Default

Description

open

boolean

false

Control open state

side

'left' | 'right' | 'top' | 'bottom'

'right'

Drawer position

modal

boolean

true

Show backdrop overlay

closeOnEscape

boolean

true

Close on Escape key

Accessibility

Built-in Accessibility Features

• Focus trapped within drawer
• Escape key to close
• Proper ARIA attributes
• Returns focus on close
• Keyboard accessible
• Screen reader announcements

Divider

Dropdown