Svelte / Components

Drawer

Svelte 5

A panel that slides from a screen edge and supports gesture dismissal.

Overview

Basic drawer

Compose the parts you need and style every surface yourself.

Live example

Examples

swipeDirection="right" · shallow routing

Open two page-like drawers, then use swipe back, the page controls, or browser Back and Forward to move through the stack.

Focus workspace Opens as its own screen

swipeDirection

Anchor a drawer to any screen edge.

snapPoints · SwipeArea

Drag between three heights, or swipe up from the bottom edge to open.

VirtualKeyboardProvider

On a phone, open each drawer and focus the last field.

Default The keyboard can cover the field.

Keyboard aware Recommended The field is lifted and scrolled into view.

nested drawers

Open all three levels; the frontmost drawer owns focus and dismissal.

createHandle · payload

One drawer can receive data from triggers anywhere on the page.