What is Multi-Zone Routing?

Multi-zone routing allows you to render different components into multiple areas of your layout (zones) simultaneously, all controlled by a single route. This is perfect for complex layouts like admin dashboards, email clients, or any application with sidebars, toolbars, and main content areas.

💡 Key Concept

Instead of having one component per route, you can have multiple components per route, each rendering in its designated zone. All zones share the same route params and querystring.

Visual Example

Here's how a typical multi-zone layout looks:

Header / Navigation
Zone: "sidebar"
Menu component
Zone: "main"
Main content component
Zone: "panel"
Toolbar component
Footer

When the user navigates to /products, all three zones update with their respective components: ProductsMenu, ProductsMain, and ProductsToolbar.

Basic Setup

Setting up multi-zone routing involves three steps:

Step 1: Define Zone-Based Routes

Use wrap() with a zones object instead of component:

Defining zone-based routes 
 
 
Step 2: Create Multiple Router Instances
 
Set up your layout with a Router for each zone, using the zone prop:
 
Layout with multiple routers 
 
 
 
Step 3: Create Zone Components
 
Zone components work just like regular route components - they receive props:
 
Zone components 
 
 
 
Dynamic Multi-Zone Layouts
 
You can conditionally show multi-zone or single-zone layouts based on the route:
 
Conditional zone layouts 
 
 
 
Multi-Zone Routes with Parameters
 
All zones share the same route parameters and querystring:
 
Zones with parameters 
 
 
 
Async Zone Components
 
Zone components support async loading with code-splitting:
 
Async zone components 
 
 
 
Multi-Zone Routes with Guards
 
Zone routes work with all routing features including guards and permissions:
 
Protected zone routes 
 
 
 
Zone Routes with Metadata
 
Multi-zone routes support all metadata features:
 
Zone routes with metadata 
 
 
 
Mixing Single and Multi-Zone Routes
 
You can mix regular single-component routes with multi-zone routes:
 
Mixed route types 
 
 
 
Common Use Cases
 
📊 Admin Dashboards
 
Create complex admin interfaces with navigation sidebar, main content area,
								and action panels that all update based on the current section.
 
  • Left: Navigation menu
    •  
  • Center: Data tables/forms
    •  
  • Right: Filters/actions
 
📧 Email Clients
 
Build email-like interfaces with folder sidebar, message list, and preview pane.
 
  • Left: Folders (Inbox, Sent, etc.)
    •  
  • Center: Email list
    •  
  • Right: Preview pane
 
🎵 Music Players
 
Create Spotify-like layouts with playlists, main view, and playback controls.
 
  • Left: Playlists
    •  
  • Center: Album/artist view
    •  
  • Right: Queue/lyrics
 
📝 Document Editors
 
Build document editing interfaces with file browser, editor, and properties panel.
 
  • Left: File tree
    •  
  • Center: Editor
    •  
  • Right: Properties/formatting
 
Best Practices
 
Consistent Zone Names
 
Use consistent zone names across your application (e.g., "sidebar", "main", "panel").
					This makes the code more maintainable and easier to understand.
 
Responsive Layouts
 
Use CSS Grid or Flexbox to create responsive zone layouts that adapt to different screen sizes.
					Consider hiding or stacking zones on mobile devices.
 
Loading States
 
When using async zone components, consider showing loading indicators for each zone
					independently to provide better UX feedback.
 
Shared State
 
Zone components can share state using Svelte stores or context. This is useful for
					communication between zones (e.g., sidebar selection affecting main content).
 
Complete Example
 
Here's a full working example of multi-zone routing:
 
Complete multi-zone example 
 
 
 
API Reference
 
wrap() with zones
 
ZoneRouteConfig type 
 
 
 
Router zone prop
 
Router with zone prop 
 
 
 
Try It Live
 
See multi-zone routing in action in our example applications:
 
Check out the example/ directory in the repository for a complete multi-zone demo.
 
Navigate to /multi-zone-demo in the example app to try it yourself!