Drawers

Prerequisites

Initialize Stores

Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR.

import { initializeStores } from '@skeletonlabs/skeleton';

initializeStores();

Drawer Component

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

<Drawer />

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

Drawer Store

Provides an interface to control the drawer component.

NOTE: To retrieve the store, getDrawerStore must be invoked at the top level of your component!

import { getDrawerStore } from "@skeletonlabs/skeleton";

const drawerStore = getDrawerStore();

Open

drawerStore.open();

Close

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().

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.

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

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.

$: 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.

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

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