Page shell and navigation

BrandStageShell belongs in the shared SvelteKit layout. It owns the persistent stage, theme and model resources while collection and detail routes change inside it. Keeping it mounted makes transitions possible.

Use the Spatial Elements ContentPage for collections and mixed spatial content, with an explicit hdr for lighting. It wraps the Page Sections content layout and registers the page with the shared stage. For ordinary documentation without 3D, use Page Sections directly; no stage is required.

The page object supplies metadata and breadcrumbs. It does not create a visible page heading. Place a Page Sections HeadingSection with headingLevel: 1 among the children, or use a Hero section. Its background and position are yours to choose.

Provide a Page Sections Navigation and a single navigation tree in your application shell. Every entry has a real page URL. Derive the active path, breadcrumbs and sidebar items with resolveNavigation.

When sharing a complete Page Sections navigation with non-spatial routes, pass it as the navigation snippet on BrandStageShell. The spatial shell then owns its positioning, scroll compensation and surfaces. Keep the menu inside that shell so it reserves space above the detail page.

The header and satellites share the theme's panelTheme: frosted surfaces use its tint, opacity, backdrop blur and shadow, including without WebGPU. This website keeps one shell and one light/dark palette across documentation and the combined showcase.

The Spatial Elements ContentPage accepts leftSidebar and footer snippets. Pass a SidebarNavigation into the left snippet. Set showContentMenu to generate the right menu from section headings; H1 is excluded and H3 is indented beneath H2. contentMenuLabel changes its accessible label.

The sidebar layout, sticky positioning and compact-screen content-menu popup come from Page Sections. The right sidebar docks to consistently solid, standard-width sections and floats when sections use full-width or transparent surfaces.

This documentation demonstrates those components. See the Page Sections documentation for the complete navigation and heading APIs.

Choose URLs that suit your content, such as /showcase/, /gallery/ and /products/[slug]/. Transitions match registered elements across spatial grids, carousels and detail pages. The theme ID identifies the collection; it does not have to match a URL prefix. Keep it and your element IDs stable.

Use native links so navigation also works without JavaScript. getSpatialListItems derives detail links from your element data and an explicit route prefix. You can also provide each item's own href. Spatial sections register those destinations automatically. Supply a poster for each model so cards and detail pages stay useful without WebGPU.

Build the complete collection and detail example, then explore the interactive collection playground.