Select a drawer example to preview.
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.
Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).
Provides an interface to control the drawer component.
NOTE: To retrieve the store,
getDrawerStore must be invoked at the top level of your component!
To pass arbitrary metadata, create a
meta object within
DrawerSettings. Then use
$drawerStore.meta to retrieve this.
For global styles, apply changes via props directly to the Drawer component. However, you may also override styles per drawer
instance via the
Create a new
DrawerSettings object, supply a unique
id, then pass these settings
Within the default slot of your Drawer component, setup conditional statements based on the value of
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.
Then apply this value to the proper wrapping page element, such as the App Shell or a main element.
For best results, be sure to take into account the Drawer position as well via
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.