Route Metadata System
Enhance your routes with dynamic titles, breadcrumb navigation, and custom metadata. Perfect for building hierarchical navigation, improving SEO, and managing route-specific data.
Basic Usage
Define metadata directly in your route configuration:
Accessing Metadata
Use the metadata helpers to access route data in your components:
Dynamic Updates
Update metadata after loading data - essential for detail pages:
Pattern 1: Full Metadata Update
Pattern 2: Partial Updates (Recommended)
Update only specific breadcrumb segments by ID - cleaner and more efficient:
Nested Route Breadcrumbs
Handle deeply nested routes with multiple dynamic segments:
Custom Metadata (userData)
Store any custom data you need for the current route:
Loading States
Three patterns for handling loading states with metadata:
Pattern 1: Router-Managed Loading (Zone-specific)
Router shows loading component until you call hideLoading(). Perfect for multi-zone layouts:
Pattern 2: Component-Managed Loading (Default)
Component manages its own loading state - no special configuration needed:
Pattern 3: Global Loading Overlay (User-defined)
Define a global loading overlay that reacts to route loading state:
Reusable Breadcrumb Component
Create a reusable breadcrumb component:
API Reference
Metadata Functions
| Function | Description |
|---|---|
routeTitle() | Get current route title as reactive value |
routeBreadcrumbs() | Get current breadcrumbs array as reactive value |
routeUserData() | Get custom userData object as reactive value |
updateRouteMetadata(metadata) | Update full metadata (title, breadcrumbs, userData) |
updateTitle(title) | Update only the title |
updateBreadcrumb(id, updates) | Update specific breadcrumb by ID |
hideLoading() | Signal router that route is ready (when using shouldDisplayLoadingOnRouteLoad) |
showLoading() | Manually show loading state (triggers global overlay if defined) |
routeIsLoading() | Check if route is currently loading (reactive) |
BreadcrumbItem Interface
Best Practices
Use Partial Updates
Prefer updateBreadcrumb(id, updates) over updateRouteMetadata() when you only need to update dynamic segments. It's cleaner and more maintainable.
Add IDs to Dynamic Breadcrumbs
Always add an id property to breadcrumb items that will be updated dynamically: { id: 'documentDetail', label: 'Loading...', path: '/document/:id' }
Update Document Title
Remember to update the browser's document title for SEO and better UX: document.title = routeTitle()
Accessibility
Use proper ARIA attributes for breadcrumb navigation: <nav aria-label="breadcrumb">
Try It Live
See route metadata in action:
Check out the example-history/ directory in the repository for complete
working examples with metadata, breadcrumbs, and dynamic updates.