The shaded regions represent the portion of the page that scrolls vertically.
Implement the App Shell in your app's root layout in
/src/routes/+layout.svelte. Slot order does not
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.
Then update your global stylesheet with the following. This will disable overflow for html and body tags to prevent duplicate scroll bars.
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
If you wish for your App Bar to scroll with the page, insert it into the
If you wish to have a sticky
pageHeader, apply the following App Shell prop styles.
Sidebars have a default width of
auto. This means they will automatically collapse when their contents are
hidden. Use this to remove the sidebar with CSS media queries via
Tailwind's responsive breakpoints.
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
Tracking Scroll Position
on:scroll event to detect when the page region is scrolled vertically.
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.