Layouts

Layouts are useful when there are elements that should be visible on every page, such as top-level navigation or a footer.

  • The only requirement is that the component includes a <slot> for the page content.

Nested Layouts

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 -->
<h1>Settings</h1>

<div class="submenu">
	<a href="/settings/profile">Profile</a>
	<a href="/settings/notifications">Notifications</a>
</div>

<slot></slot>

Resetting the layout stack

To reset the layout stack, create a layout.reset.svelte file instead of a layout.svelte file. For example, if you want your /admin/* pages to not inherit the root layout, create a file called src/routes/admin/__layout.reset.svelte.

Error pages

Sveltekit renders a default error page, but if we supply a __error.svelte alongside the component, then that will be shown to the user.