Route-Level Layouts

You can add a layout that applies only to a specific route and its children by placing +layout.svelte in that route's folder.

Nested layouts stack: the root layout wraps the section layout, which wraps the page.

An admin section can have its own sidebar layout while inheriting the global header.

Each layout can load its own data; data flows down to nested layouts and pages.

Avoid duplicate markup by sharing layouts at the deepest common folder.

Mix groups and route-level layouts for advanced architectures.

Each layout can have its own +error.svelte for section-specific errors.

+layout.server.js runs only on the server; +layout.js runs everywhere.

Think of layouts like composable shells. Each adds context, styling, or data to its children.

Every page renders inside all ancestor layouts. Drill down to leaf pages.

Layouts are cached and reused across navigations within their scope.

Add +layout.svelte per folder for section-specific UI; they stack with ancestor layouts automatically.