Shared Navigation (Inherited)

Section Navigation

Overview
Getting Started
Advanced Topics

Layout Info (child page)

Source: child page

This data was overridden by +page.server.ts

Page-Only Region (Added)

New Region Added by Page

This region only exists because the page defined it

Live Demo: The three regions at the top of this page demonstrate inheritance (blue), override (purple), and addition (green) patterns working together.

How It Works

SvelteKit's parent() function allows child load functions to access data from parent layouts. We use this to create a flexible inheritance system for regions:

Inherit: Child pages automatically receive all parent regions
Override: Child can redefine a region with the same name
Add: Child can define new regions alongside inherited ones

The Pattern

1. Parent Layout Defines Regions

The parent layout's load function defines initial region data that will be available to all child pages.

routes/examples/advanced/+layout.server.ts

2. Child Page Inherits and Modifies

The page calls await parent() to get parent data, then uses the spread operator to inherit regions before defining its own.

routes/examples/advanced/+page.server.ts

3. Layout Defines Region Slots

The layout defines where regions appear. The same <LayoutRegion> components receive different data depending on which page is active.

routes/examples/advanced/+layout.svelte

Key Concepts

Inheritance (Blue)

The sharedNav region is defined in the parent layout and inherited by the page without modification. It appears on all pages in this section.

Override (Purple)

The layoutInfo region is defined in the parent layout but overridden by the page. The page spreads parent regions first, then redefines this region with new data.

Addition (Green)

The pageOnlyRegion doesn't exist in the parent layout. It's defined only by this page, demonstrating how pages can add new regions alongside inherited ones.

Order Matters

Always spread parent regions first! Spreading after your definitions will erase your changes.

Correct

regions: {
  ...(parentData.regions || {}),
  layoutInfo: { /* override */ }
}

Wrong

regions: {
  layoutInfo: { /* override */ },
  ...(parentData.regions || {})
  // This erases your override!
}

When to Use This Pattern

Multi-level layouts: When you have nested route structures like /products/[category]/[id]
Section-wide data: When all pages in a section share common regions (navigation, breadcrumbs, etc.)
Progressive enhancement: When child pages need to extend or modify parent data while preserving some of it
Flexible overrides: When some pages need to completely replace parent regions while others keep them

Learn More

Read the full Advanced documentation →

Advanced: Region Inheritance