+layout.svelte

To create a layout that applies to every page, make a file called src/routes/+layout.svelte. The default layout (the one that SvelteKit uses if you don’t bring your own) looks like this…

<slot></slot>

…but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a <slot> for the page content. For example, let’s add a nav bar:

src/routes/+layout.svelte
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/settings">Settings</a>
</nav>
 
<slot></slot>

If we create pages for /, /about and /settings…

src/routes/+page.svelte
<h1>Home</h1>
src/routes/about/+page.svelte
<h1>About</h1>
src/routes/settings/+page.svelte
<h1>Settings</h1>

…the nav will always be visible, and clicking between the three pages will only result in the <h1> being replaced.

Layouts can be nested. Suppose we don’t just have a single /settings page, but instead have nested pages like /settings/profile and /settings/notifications with a shared submenu (for a real-life example, see github.com/settings).

We can create a layout that only applies to pages below /settings (while inheriting the root layout with the top-level nav):

src/routes/settings/+layout.svelte
<script lang="ts">
  import type { LayoutData } from "./$types"
 
  export let data: LayoutData
</script>
 
<h1>Settings</h1>
 
<div class="submenu">
  {#each data.sections as section}
  <a href="/settings/{section.slug}">{section.title}</a>
  {/each}
</div>
 
<slot></slot>

By default, each layout inherits the layout above it. Sometimes that isn’t what you want - in this case, advanced layouts can help you.

Backlinks