[Svelte Series 8] Build layouts with slots

As pages multiply, managing shared regions separately is the only way to stay consistent. This chapter shows how to use layouts and slots to keep repeated UI structured.

Key terms

1. Layout: A wrapper file that multiple pages share; it places global UI like headers and footers once.
2. Slot: The placeholder a layout leaves open. <slot /> marks where each page’s unique content is rendered.
3. Named slot: A slot with slot="sidebar" or similar that restricts content to a specific region.
4. <svelte:fragment>: A Svelte-specific tag used to group several elements before inserting them into a named slot.

Core ideas

Layouts are shells shared across routes. The root layout can set up headers and footers, and nested folders can introduce their own layouts for sub-sections. Slots are the gaps inside those shells. The default slot (<slot />) receives the page body, while named slots ensure only certain content fills areas like a sidebar or bottom panel. With this structure, common UI stays untouched as pages swap in and out.

Server vs. client boundaries

• +layout.server.ts runs only on the server to prepare data (for example, the logged-in user). +layout.svelte receives that data and renders it in the browser. When in doubt, check the file extension.
• Empty slots cascade through the layout tree. The parent layout’s <slot /> holds the child layout, whose own <slot /> finally hosts the actual page. Trace that nesting slowly to clarify when each piece renders.
• Named slots require exact names. A typo means Svelte silently renders an empty area, so treat strings like slot="sidebar" as constants you reuse.

Code examples

Start with the root layout and a dashboard-specific shell.

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

<div class="shell">
  <AppHeader user={data.user} />
  <main>
    <slot />
  </main>
  <AppFooter />
</div>

Every page renders inside <main> via the default slot. When a dashboard needs more regions, declare named slots:

<!-- src/routes/(dashboard)/+layout.svelte -->
<DashboardShell>
  <svelte:fragment slot="sidebar">
    <ProjectSidebar />
  </svelte:fragment>

  <slot />

  <svelte:fragment slot="bottom-panel">
    <RecentActivity />
  </svelte:fragment>
</DashboardShell>

Inside DashboardShell, only matching slot names will render.

<!-- DashboardShell.svelte -->
<div class="dashboard">
  <aside>
    <slot name="sidebar" />
  </aside>
  <section class="content">
    <slot />
  </section>
  <footer>
    <slot name="bottom-panel" />
  </footer>
</div>

Switching pages keeps the header, sidebar, and bottom panel intact while swapping only the body. Navigation, assignment trackers, and alert bars remain stable across the student service UI.

Why it matters

Club admin panels or school deployment apps typically reuse the same frame while content changes. Layouts and slots let new pages plug in without breaking existing surfaces. Named slots also keep each component unaware of exact positioning, which makes collaboration easier.

Practice checklist

• Follow along: create a root layout with header, footer, and a main slot.
• Extend it: add a dashboard layout with sidebar and bottom-panel slots.
• Debug: if slot content vanishes, verify both the slot attribute and the <slot /> placement.
• Completion criteria: navigating between pages leaves the header and sidebar untouched while the body swaps.

Wrap-up

Layouts and slots lock the UI frame so per-page differences stay minimal. Next we’ll add transitions and animations atop this structure to introduce flow.