Drawers

Import and add a single instance of the Drawer component in your app's root layout. Since this is in global scope it will be possible to reuse this feature throughout your entire application.

<Drawer />

Drawer Store

This contains the drawer's current state and settings.

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

Open

To open the drawer, use the store's open() method to show the drawer.

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

Close

To close the drawer, use the store's close() method to hide the drawer.

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

Handling Contents

If you wish to swap out the contents of your drawer, set a unique id per drawer instance.

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

Then, conditionally update your drawer's default slot content via $drawerStore.id. We use this technique for the Skeleton documentation site.

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

If you need to pass custom abitrary metadata use the meta key. 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

In most cases we recommend setting default styles via the Drawer component props. However, you may override prop values per drawer instance by passing a key/value pair as shown below. See the Props tab near the top of this page for a full list of available options.

function drawerOpenStyled(): void {
	const settings: DrawerSettings = {
		id: 'demo',
		// Provide your prop overrides
		position: 'right',
		bgDrawer: 'bg-primary-500 text-on-primary-token',
		bgBackdrop: 'bg-primary-500/50',
	};
	drawerStore.open(settings);
}

SvelteKit SSR Warning

Be aware that there are known issues when using Svelte stores with SSR, such as our drawer store. To prevent these issues please avoid the use of the drawer store within any SvelteKit Load function. Likewise, if you need a drawer to open on route initilization we advise triggering the open() method after the SvelteKit Browser environment context is available.

import { browser } from '$app/environment';

if (browser) drawerStore.open(settings);

For additional context please see this thread.