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
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.
Park Centre / Today

Park Centre · today

Three tills open, one cashier on lunch.

Today
$ 2,816
Today
147
Today
$ 19.16
Today
$ 38
COMPOSITION 02

Owner · multi-site

Topbar carries a site picker; the sidebar groups by site. The owner can hop between Park Centre, Avondale, Glen Lorne 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.
3 sites · today

$ 5,212 group revenue

Park
$ 2,816
Avondale
$ 1,408
Glen Lorne
$ 988
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.
Park Centre / Products

2,418 products

[ Table fills the freed space ]
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.
Workspace / Settings

Members & roles

Robert Mukamba · Owner
Mai Ndlovu · Bursar
Faith Moyo · Cashier
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.
Close shift S-2841 Step 2 of 4 · counting cash

Count the drawer

Enter the cash in the till by denomination.

$ 50 ×14
$ 20 ×32
$ 10 ×28
$ 5 ×42
$ 2 ×36
$ 1 ×48

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.