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';

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 | undefined

false

Open

disabled

boolean | undefined

false

Disabled

portal

string | PortalBond | undefined

Portal

onclose

((event: Event, bond: DrawerBond<DrawerBondProps<Record<string, unknown>>, DrawerBondState<DrawerBondProps<Record<string, unknown>>>>) => void) | undefined

Onclose

factory

Factory<DrawerBond<DrawerBondProps<Record<string, unknown>>, DrawerBondState<DrawerBondProps<Record<string, unknown>>>>> | undefined

Factory

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