Utility

Drawers

Displays an overlay panel that attaches to any side of the screen.

typescript
import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
import type { DrawerSettings } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Select a drawer example to preview.

Drawer Component

Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).

html
<Drawer>(contents)</Drawer>

<!-- <AppShell>...</AppShell> -->

Drawer Store

Import this anywhere you wish to control the Drawer. Provides an interface to control the drawer component.

Open

typescript
drawerStore.open();

Close

typescript
drawerStore.close();

Passing Metadata

To pass arbitrary metadata, create a meta object within DrawerSettings. Then use $drawerStore.meta to retrieve this.

Styling

For global styles, apply changes via props directly to the Drawer component. However, you may also override styles per drawer instance via the DrawerSettings.

Handling Contents

Create a new DrawerSettings object, supply a unique id, then pass these settings on drawerStore.open().

typescript
const settings: DrawerSettings = { id: 'example-1' };
drawerStore.open(settings);

Within the default slot of your Drawer component, setup conditional statements based on the value of $drawerStore.id.

html
<Drawer>
	{#if $drawerStore.id === 'example-1'}
		<!-- (show 'example-1' contents) -->
	{:else if $drawerStore.id === 'example-2'}
		<!-- (show 'example-2' contents) -->
	{:else}
		<!-- (fallback contents) -->
	{/if}
</Drawer>

Background Animation

Advanced

To animate the contents behind your drawer while it's open, first create a reactive property based on the state of the Drawer. Then implement a Tailwind translate class when the drawer is open.

typescript
$: positionClasses = $drawerStore.open ? 'translate-x-[50%]' : '';

Then apply this value to the proper wrapping page element, such as the App Shell or a main element.

html
<AppShell class="transition-transform {positionClasses}">...</AppShell>
html
<main class="transition-transform {positionClasses}">...</main>

For best results, be sure to take into account the Drawer position as well via $drawerStore.position.

Accessibility

Skeleton does not provide a means to disable the backdrop's click to close feature, as this would be harmful to accessibility. View the ARIA APG guidelines to learn more about modal accessibility.

SvelteKit SSR Warning

There are known security risks when using Svelte writable stores within SvelteKit load functions.

Details →