In SvelteKit, you can create a page layout file called
__layout.svelte, which acts as a shell for each child page.
Here is a simple example layout:
<script> import Navbar from '$lib/Navbar.svelte'; import Footer from '$lib/Footer.svelte'; </script> <Navbar /> <slot /> <Footer />
Each child page of that
__layout.svelte file will be inserted in the place of the
For example, if this
__layout.svelte file were placed in the
/example/ folder, the contents of
/example/index.svelte would be inserted where the
slot tag is.
You can also
nest layouts within parent layouts. However, sometimes, you might want to reset a layout entirely. Maybe you don’t want
/example/foo/bar.svelte to have a navbar or footer.
reset a layout without inheriting a parent layout, simply change the file name from
And that’s how you reset a layout in SvelteKit!