Home/Patterns/App shell

App shell

The whole-page frame: sidebar + topbar + content area. Every product surface lives inside it. Five compositions, one per role the chrome adapts to.

Stable 5 compositions

Shell at every breakpoint

Structure only — greyscale wireframes show how the chrome reflows mobile → tablet → desktop. Content is intentionally skeletal.

Mobile
SM
Tablet
MD
Desktop
LG

Live examples

Where to see this shell in action — reference docs, cookbook recipes, and shipped kits.

REFERENCE App shell anatomy The parts list — sidebar, topbar, content column, footer. Open reference → COOKBOOK App shell with sidebar Recipe assembling the shell with a collapsible sidebar. Open recipe → KIT · LIVE Operator overview The shipped dashboard kit running the app shell. Open live →
COMPOSITION 01

Operator default

The standing layout — 252 px sidebar, breadcrumb topbar, content column. The chrome the typical operator uses all day.

Use whenA workspace member who logs in and works inside one or two verticals. Cashiers, plant operators, bursars.
COMPOSITION 02

Owner · multi-site

Topbar carries a site picker; the sidebar groups by site. The owner can hop between sites without losing context.

Use whenA workspace owner or group manager working across 3+ sites. The site they're focused on is part of the chrome.
COMPOSITION 03

Compact · sidebar collapsed

Sidebar reduces to an icon rail when the operator needs maximum content space. Persisted per user.

Use whenThe operator is on a narrow display, or has explicitly collapsed the sidebar to focus on a single dense surface.
COMPOSITION 04

Settings shell · nested

When the active surface is settings or master-data, the content column itself splits into a section rail + content (the SHL-02 shell).

Use whenAnywhere the operator needs to navigate a tree of related screens — settings, master data, account management.
COMPOSITION 05

Focus mode · workflow

When the operator starts a multi-step workflow (close shift, post payroll, import students), the chrome collapses to just brand + a step header — sidebar hidden until cancel.

Use whenThe operator is inside a workflow where any nav-away mid-step would lose progress. Removes distractions to keep them on task.

Shared rules

What every composition obeys.

Do

Persist sidebar collapsed / expanded state per user. Operators stay in their preferred config.

Don't

Hide the org switcher even when only one workspace exists. Position consistency matters.

Do

Adapt the topbar to the role — site pickers for owners, breadcrumbs for operators.

Don't

Use the shell to host marketing or onboarding. Strip it for those flows.