Layouts in Svelte

From the SvelteKit cheat sheet · Routing · verified Jul 2026

Layouts

Nested layouts and layout groups

javascript
<!-- +layout.svelte -->
<script>
  export let data;
</script>

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

<slot />

<footer>© 2024</footer>
🎨 Nested layouts inherit from parent layouts
📦 Layout groups with (folder) for organization
🔄 Layout resets with @ syntax
⚡ Layouts can have their own load functions

More Svelte tasks

Back to the full SvelteKit cheat sheet