Nested Layouts

When a sub-section needs extra chrome (a sidebar, a subnav), wrap a section layout around the base layout.

3 min read Level 2/5 #astro#layouts#composition

What you'll learn

Compose layouts by nesting them
Recognize when not to bother

A page can wrap one layout, which itself wraps another. Useful when a sub-section (/blog, /docs) has extra chrome on top of the site-wide chrome.

Two Layouts

---
// src/layouts/Base.astro
interface Props { title: string; }
const { title } = Astro.props;
---
<html>
  <head><title>{title}</title></head>
  <body>
    <header>Site nav</header>
    <slot />
    <footer>Footer</footer>
  </body>
</html>

---
// src/layouts/Docs.astro
import Base from "./Base.astro";

interface Props { title: string; }
const { title } = Astro.props;
---

<Base title={title}>
  <div class="docs-layout">
    <aside>Docs sidebar</aside>
    <article>
      <slot />
    </article>
  </div>
</Base>

Docs renders inside Base’s slot, and a docs page renders inside Docs’s slot.

Use From a Page

---
// src/pages/docs/getting-started.astro
import Docs from "../../layouts/Docs.astro";
---

<Docs title="Getting Started">
  <h1>Getting Started</h1>
  <p>...</p>
</Docs>

How Deep Should You Go?

Two levels (base + section) covers most sites. More than that and the indirection starts to hurt. If you’re tempted to nest three, consider extracting a real component instead.

When Not to Bother

For a single layout shared by all pages, just use one. Nesting is for genuinely different chrome between sections.

Chapter Done

That’s pages and routing. Next chapter zooms back into the component side — props, slots, control flow, and styling in depth.

Components →