Layouts

Define a wrapping component for routes at the same level or below using layouts:

routes
└── about
   ├── index.svelte
   ├── layout.svelte
   ├── team.svelte
   └── work.svelte

This layout component must render its children:

layout.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

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

<div class="wrapper">
	{@render children()}
</div>

NOTE

When navigating between routes that share the same layout, the layout component persists without being recreated. This prevents unnecessary side effect triggers

NOTE

To apply different layouts to routes at the same level, see Route Groups.

WARNING

Layouts can only be used in tree structure, which means that doing the following will not work:

routes
├── about.svelte
└── about.layout.svelte # ❌ Won't work

Break Out of Layouts

Sometimes you may want certain routes to ignore their parent's layout. You can exclude a route from inheriting its parent layout by wrapping the route segment in parentheses:

routes
└── about
   ├── index.svelte                    ➜ Uses layout
   ├── layout.svelte
   └── work
      ├── index.svelte                 ➜ Uses layout
      └── (clients).svelte             ➜ Ignores layout

This pattern works for all route types, including dynamic segments and catch-all routes:

# Dynamic route that ignores parent layout
routes
└── ([id]).svelte

# Catch-all route that ignores parent layout
routes
└── ([...notfound]).svelte

This technique allows you to selectively bypass layouts while maintaining your overall route hierarchy.

Break Out to a Named Layout

To keep some layouts but not all of them, append @ followed by the name of the segment whose layout should be kept. Every layout below that segment is skipped:

routes
├── layout.svelte
└── about
   ├── layout.svelte
   └── work
      ├── index.svelte                 ➜ Uses root, about and work layouts
      ├── layout.svelte
      ├── clients@about.svelte         ➜ Uses root and about layouts
      └── archive@.svelte              ➜ Uses root layout only

A lone @ keeps only the root layout. This also works with index (index@about.svelte), dynamic ([id]@about.svelte) and catch-all ([...rest]@about.svelte) routes, and a dynamic folder can be targeted by its name (edit@[id].svelte). Layouts of route groups below the target are skipped too.