App Shell

Svelte Component

Responsive shell for controlling application layout.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

The shaded regions represent the portion of the page that scrolls vertically.

header
(route slot)
pageFooter

Getting Started

Implement the App Shell in your app's root layout in /src/routes/+layout.svelte. 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>

Global Styles

Required

The App Shell will need to expand to fill all available space within your app's body tag. Open /src/app.html and add the following classes. This wrapping element is required and the style of display: contents should remain.

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

Then update your global stylesheet with the following. This will disable overflow for html and body tags to prevent duplicate scroll bars.

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

Using an 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>

If you wish for your App Bar to scroll with the page, insert it into the pageHeader slot.

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

If you wish to have a sticky pageHeader, apply the following App Shell prop styles.

html 
<AppShell regionPage="relative" slotPageHeader="sticky top-0 z-10">...</AppShell>

Responsive Sidebars

Sidebars have a default width of auto. This means they will automatically collapse when their contents are empty or hidden. Use this to remove 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>

Tracking Scroll Position

Use the on:scroll event to detect when the page region is scrolled vertically.

typescript 
function scrollHandler(event: UIEvent & { currentTarget: EventTarget & HTMLDivElement; }) {
	console.log(event.currentTarget.scrollTop);
}
html 
<AppShell ... on:scroll={scrollHandler}>