Svelte Component

App Shell

Responsive shell for controlling application layout.

typescript 
import { AppShell } from '@skeletonlabs/skeleton';
Source Page Source

Demo

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

header
<slot />
pageFooter

Implement the App Shell in your app's root layout in /src/routes/+layout.svelte. Slot order does not matter.

Prerequisites

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>

Scroll to Top on Navigation

If you wish to have the App Shell page region auto-scroll to the top when navigating, add the following to your root layout in /src/routes/+layout.svelte.

typescript 
import type { AfterNavigate } from '@sveltejs/kit';
import { afterNavigate } from '$app/navigation';

afterNavigate((params: AfterNavigate) => {
    const isNewPage = params.from?.url.pathname !== params.to?.url.pathname;
    const elemPage = document.querySelector('#page');
    if (isNewPage && elemPage !== null) {
        elemPage.scrollTop = 0;
    }
});

Tracking Scroll Position

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

typescript 
import type { ComponentEvents } from 'svelte';

function scrollHandler(event: ComponentEvents<AppShell>['scroll']) {
	console.log(event.currentTarget.scrollTop);
}
html 
<AppShell ... on:scroll={scrollHandler}>

Scrollbar Gutter

Use the scrollbar gutter property to adjust how the page region scrollbar gutters are handled. View a quick demo video.

typescript 
<AppShell scrollbarGutter="auto">...</AppShell>

Accessibility

Please be aware that the App Shell does not support window scoped scrolling. This may affect certain features, such as pull-to-refresh on mobile. In order to scroll the page region you first need to focus the page with either a touch or click. If you require window scoped scrolling we recommend you implement a custom layout in place of the App Shell.