title: "Step 4 — Layouts" active_step: 4

# Step 4 — Layouts

Shared page shells with `application.what` and directory inheritance.

## What is a layout?

A layout is a component that wraps all pages in a directory. It provides the shared shell — navigation, sidebar, footer — while the page content is inserted via `<slot/>`. You set the layout in an `application.what` file.

    <!-- site/tutorial/application.what -->
    layout = "components/tutorial-layout.html"

Every page in `site/tutorial/` now uses this layout. The welcome page at `site/index.html` does not — it has `layout: none`.

## Directory inheritance

Layout config inherits from parent directories to children. You can override or disable it at any level.

site/
index.html ← no layout (layout: none)
tutorial/
application.what ← layout = "components/tutorial-layout.html"
1.html ← inherits tutorial-layout.html
admin/
application.what ← layout = "components/admin.html"
dashboard.html ← inherits admin.html

## Disabling the layout

To render a page without any layout — like a landing page or API response — use `layout: none` in the page's `<what>` block.

    <what>
    title: "Landing Page"
    layout: none
    </what>

    <!-- Full HTML output, no wrapper -->
    <!DOCTYPE html>
    <html>...</html>

## Passing data to layouts

Layout components receive props from each page's `<what>` block. This tutorial layout uses `active_step` and `title` to highlight the correct sidebar item and set the browser tab title.

    <!-- Page passes props to its layout -->
    <what>
    active_step: 4
    title: "Step 4 — Layouts"
    </what>

    <!-- Layout declares them -->
    <what>
    props = "active_step, title"
    defaults.active_step = "0"
    </what>

## The slot

The `<slot/>` tag inside a layout is where page content goes. Without it, pages would render with no visible output.

    <!-- components/tutorial-layout.html -->
    <main>
      <slot/>   <!-- Page content goes here -->
    </main>

What you learned

- `application.what` sets the layout for a directory and all children
- Layout config inherits parent-to-child — override at any level
- `layout: none` in a page's `<what>` block disables the wrapper
- Pages pass props to layouts via their `<what>` block
- `<slot/>` in a layout marks where page content is inserted