SvelteKit by Example: Layouts

Layout components wrap a page. Layouts are applied to all pages in their subtree.

In this example, we'll share navigation between our pages.

The current page is passed to the layout as a children snippet.

A layout is used for its sibling page and all descendants. This navigation appears on the home, about, and lists pages.

Render the snippet to display the current page.

src/routes/+layout.svelte

<script>
  let { children } = $props();
</script>



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


{@render children()}

Like page scripts, layout scripts can prepare data. A universal layout load follows the same server, hydration, and browser rules as a universal page load.

src/routes/+layout.js

/** @type {import('./$types').LayoutLoad} */
export function load() {
  return { title: 'My todos' };
}

Use the generated LayoutProps type for layout props, including data and children.

src/routes/+layout.svelte

<script lang="ts">
  import type { LayoutProps } from './$types';

  let { data, children }: LayoutProps = $props();
</script>

<header>{data.title}</header>
{@render children()}

Layout data is merged with page data, so pages can read it too. Use PageProps for page components.

src/routes/+page.svelte

<script lang="ts">
  import type { PageProps } from './$types';

  let { data }: PageProps = $props();
</script>

<h1>{data.title}</h1>

resources://