SvelteKit by Example: Layouts

Layout components are rendered around a page, and put the page contents in a slot. Layouts are applied to all pages in the subtree.

A layout is used for its sibling page and all descendants. This layout would be used for src/routes/+page.svelte, src/routes/about/+page.svelte, etc.

The current page will be rendered in a slot.

src/routes/+layout.svelte

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/lists">Lists</a>
</nav>

<slot></slot>

Like page components and page scripts, layouts can be accompanied by a layout script to pass data to the layout component.

Layout data will be merged with the page data and is also available in page components.

src/routes/+layout.js

/** @type {import('./$types').LayoutLoad} */
export function load() {
    // …
}

src/routes/+layout.svelte

<script>
    /** @type {import('./$types').PageData} */
    export let data;
</script>

src/routes/+page.svelte

<script>
    /** @type {import('./$types').PageData} */
    export let data;
</script>

resources://