Layouts

Layouts wrap pages with shared chrome — nav, sidebars, and nested shells via #[layout] and Slot.

Define a layout

#[layout("/")]
fn SiteLayout() -> View {
    view! {
        <header>
            <nav>
                <NavLink href="/" activeClass="active">"Home"</NavLink>
            </nav>
        </header>
        <Slot />
        <footer>"© 2026"</footer>
    }
}

Nested layouts

#[layout("/docs")]
fn DocsLayout() -> View {
    view! {
        <div class="docs-shell">
            <aside>{doc_sidebar()}</aside>
            <main><Slot /></main>
        </div>
    }
}

Layout markers

Place layout.rs or _layout.rs in a directory to mark layout scope. Layouts in main.rs use #[layout(\"/prefix\")] with a URL prefix.

How nesting works

The router computes a layout chain root → leaf. Each layout renders its Slot with the next inner layout or the page content.

/docs/getting_started
  → SiteLayout (/)
    → DocsLayout (/docs)
      → getting_started page