Layout Files: +layout.svelte
Share navigation and shell UI across multiple pages with layout components.
Layout Files: +layout.svelte is a free Sveltejs Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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>The slot
The current page is injected where <slot /> appears.
Nested Layouts
Add +layout.svelte in any subfolder for section-specific layouts.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesLayout Inheritance
Pages inherit all parent layouts from root down. Stack them for shared UI.
Layout Data Loading
Pair with +layout.js to load data needed in the layout.
Conditional UI
Layouts can read $page to adjust based on the current URL.
Reset Layout
Use +page@ notation to break out of a layout for a specific page.
Layout Groups
Use folders like (marketing) for layouts that do not add URL segments.
Error Pages
Place +error.svelte in any layout folder to catch errors for that section.
Reusing Layouts
Layouts make consistent UI easy. No prop drilling required.
Quick Check
Where does the page render inside a layout?
Recap
Layouts wrap pages via +layout.svelte with a <slot />. They nest by folder depth.
Frequently asked questions
Is the “Layout Files: +layout.svelte” lesson free?
Yes — the full text of “Layout Files: +layout.svelte” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Layout Files: +layout.svelte”?
Share navigation and shell UI across multiple pages with layout components. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Layout Files: +layout.svelte” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- File-based Routing with +page.svelte
- Dynamic Route Parameters: [id]
- Optional and Rest Parameters
- Layout Files: +layout.svelte