Page shell

Page templates

Overview

The page shell is the scaffold the other templates sit inside: a breadcrumb, a page title, an internal side navigation, and a content area. It deliberately has no content of its own — take the shell, put your own labels in the navigation, and build whatever your product needs in the content slot. Use it when your feature spans several related screens that should feel like one place.

Preview

Dashed outlines mark the four regions you own. They are annotations, not part of the template — nothing in the shell is outlined when you build it.

Breadcrumb
Page title

Page title

Side navigation
Content area

Your content goes here

Tables, cards, forms, charts, or another template's body — composed from documented Chords components.

Anatomy

Four regions, stacked then split. The breadcrumb and title stay full width; the navigation and content sit side by side below them.

  • 1. Breadcrumb — the documented Breadcrumb, at the top of the main content area and above the title. The last level is the current page: unlinked, regular weight, carrying aria-current="page". Needs at least three levels — drop it entirely on a one- or two-level hierarchy.
  • 2. Page title — 32px bold (--fs-display-md) in --text-strong, --space-md below the breadcrumb. One page-level action may sit top-right, baseline-aligned with the title; anything more belongs in the content area.
  • 3. Internal side navigation — a fixed 238px panel on --bg-level-02, --radius-sm, --space-lg from the content. Items are --space-md padded body-sm rows; the selected one takes --bg-level-05, semibold, and a 2px --primary-default right border. A group heading expands to reveal its destinations, sits on --bg-level-03 when open, and has no page of its own — selecting it lands on its first child.
  • 4. Content area — everything left over, flex: 1 with min-width: 0 so long tables and text truncate inside it rather than pushing the navigation off. Nothing here is prescribed.

What you fill in

The contract between the shell and your feature: replace the left column, keep the right.

Region Yours Keep as-is
Breadcrumb The trail labels, and whether it appears at all. Placement, separators, and the unlinked current level.
Page title The title text, and the one optional action. Size, weight, colour, and the action's top-right position.
Side navigation Item labels, icons, order, and any grouping. The 238px width, the selected-item treatment, and the group behaviour.
Content area Everything — composed from documented components. The column's width behaviour and its gap from the navigation.

Behavior

  • Selecting a section swaps the content area only. The breadcrumb's last level and the page title update to name the section; the navigation itself does not move.
  • Groups expand in place rather than navigating. Only the group containing the current page is open, and selecting a collapsed group opens it and lands on its first destination.
  • Drill-downs — when a section opens a record, replace the content area and add a level to the breadcrumb. Keep the side navigation visible and its section still selected, so the user knows where they are.
  • Loading — the shell renders immediately and only the content area shows skeletons. Never block the navigation on content loading.
  • Empty and error — both live inside the content area, as an empty state or a data-unavailable panel. The shell stays put.

Responsive

  • The navigation holds its 238px and the content area absorbs the difference, so the shell works down to roughly 900px without changing shape.
  • Below that, stack the navigation above the content at full width, or collapse it into Tabs if there are five items or fewer. Verify against the Responsive foundations.
  • Measure against the content area, not the viewport — a collapsing app sidebar changes the shell's width without the viewport changing at all.

When to use

  • Use when a feature has three or more related screens that belong together — an admin area, a settings area, a multi-part workflow.
  • Use it as the frame around another template: a list / index view is a perfectly good thing to put in the content area.
  • Don't use it for a single screen. One page with no siblings does not need a navigation to itself — use the page title and breadcrumb alone.
  • Don't use it to duplicate the app's global sidebar. This navigation moves within one feature; anything that leaves the feature belongs in the global navigation.
  • Don't nest groups more than one level deep. If you need a third level, the feature wants splitting.

Status

The breadcrumb, button, tabs, and skeleton in this template are documented Chords components. The internal side navigation is not — it has no component page yet, and the specification above is taken from the one shipped implementation (SecureUploadNav in WMG One, which follows the left rail on release management's project detail page). Build to the spec above, and expect it to move into a component page of its own.