App Shell

Svelte Component

Responsive shell for controlling application layout.

@skeletonlabs/skeleton
View Source
Doc Source

Examples

Header
Page Content
Page Footer

Usage

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

html 
<AppShell>
	<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>
</AppShell>

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.

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

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

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

html 
<AppShell>
	<svelte:fragment slot="header">
		<AppBar>Skeleton</AppBar>
	</svelte:fragment>
	<!-- ... -->
</AppShell>

Sidebars

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.

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