0Pricing
Sveltejs Academy · Lesson

Layout Files: +layout.svelte

Share navigation and shell UI across multiple pages with layout components.

Layouts Wrap Pages

A +layout.svelte file wraps all pages in the same folder and its subfolders.

Root Layout

src/routes/+layout.svelte wraps every page in the app. Common place for nav and shell.

<!-- +layout.svelte -->
<nav>...</nav>
<main>
  <slot />
</main>

All lessons in this course

  1. File-based Routing with +page.svelte
  2. Dynamic Route Parameters: [id]
  3. Optional and Rest Parameters
  4. Layout Files: +layout.svelte
← Back to Sveltejs Academy