Drawers

Implement a single instance of the drawer component in your app's root layout.

<Drawer />

<!-- (If present, place the <Drawer> above the <AppShell>) -->

The Drawer component will listen for updates to the Svelte store called drawerStore and displays the visible UI on screen when opened.

Drawer Store

Provides an interface to control the drawer component's state and settings. Import this anywhere you wish to control the Drawer.

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

Open

Use the store's open() method to show the drawer.

function drawerOpen(): void {
	drawerStore.open();
}

Close

Use the store's close() method to hide the drawer.

function drawerClose(): void {
	drawerStore.close();
}

Drawer Contents

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

function drawerOpen(): void {
	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>

If you have a lot of content, consider abstracting this portion of your layout to a local component. See how we use this technique.

Passing Metadata

If you need to pass abitrary metadata, create a meta object within DrawerSettings. Then use $drawerStore.meta to retreive this.

function drawerOpen(): void {
	const settings: DrawerSettings = {
		id: 'example-2',
		meta: { foo: 'bar', fizz: 'buzz', age: 40 }
	};
	drawerStore.open(settings);
}

Styling

Global Styles

You may adjust global styles via your Drawer component properties, just like any other component.

Per-Instance Styles

If you wish to override property values per drawer instance, you may pass key/value pairs of each property directly within DrawerSettings. See the Props tab near the top of this page for a full list of available properties.

function drawerOpenStyled(): void {
	const settings: DrawerSettings = {
		id: 'example-3',
		// Provide your property overrides:
		bgDrawer: 'bg-purple-900 text-white',
		bgBackdrop: 'bg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
		width: 'w-[280px] md:w-[480px]',
		padding: 'p-4',
		rounded: 'rounded-xl',
	};
	drawerStore.open(settings);
}

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

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

Then apply your the value for this proper to the 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, bu 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 we feel this would be harmful to accessability. We recommend viewing the ARIA guidelines if you wish to learn more about modal accessability.