App Shell

Svelte Component

Responsive shell for controlling application layout.


Page Content
Page Footer


For best results implement this in your app's root layout. The slot order does not matter.

	<svelte:fragment slot="header">Header</svelte:fragment>
	<svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment>
	<svelte:fragment slot="sidebarRight">Sidebar Right</svelte:fragment>
	<svelte:fragment slot="pageHeader">Page Header</svelte:fragment>
	<!-- Router Slot -->
	<slot />
	<!-- ---- / ---- -->
	<svelte:fragment slot="pageFooter">Page Footer</svelte:fragment>
	<svelte:fragment slot="footer">Footer</svelte:fragment>

The App Shell will need to expand to fill your body tag. Add the following classes to the wrapping div in /src/app.html. This element is required and the style of display: content should remain.

	<div style="display: content" class="h-full overflow-hidden">%sveltekit.body%</div>

Then, disable overflow on your html and body tags to prevent duplicate scroll bars. Update your global stylesheet with the following.

html, body { @apply h-full overflow-hidden; }

App Bar

If you wish for your App Bar component to remain fixed at the top of the page, embed it into the top-most header slot.

	<svelte:fragment slot="header">
	<!-- ... -->


Please be aware that sidebars have a default width of auto. Sidebars will automatically collapse when their contents are empty or hidden. This is useful if you wish to hide the sidebar with CSS media queries via Tailwind's responsive breakpoints.

	<svelte:fragment slot="sidebarLeft">
		<!-- Hidden below Tailwind's large breakpoint -->
		<div id="sidebar-left" class="hidden lg:block">Sidebar</div>