Shell and navigation

Every product screen opens with the same three things: a dark rail floating at the left with the product’s places in it, a white top bar level with the rail’s inset, and the content between them on the grey page. The arrangement is the same for MAFO, iRTB and MobuppsX; MAFO’s Dashboard and Click Cap pages run it, and the other two are not built. The site is not a product and has a top navigation instead.

Beta · Pattern · sidebar.css · topbar.css · breadcrumb.css · avatar.css and 4 more · in use on MAFO’s Dashboard

Sidebar · Nav item · Topbar · Breadcrumb · Avatar · Badge / Chip · Input group · Select · Button

The MAFO shell — the rail, the top bar and the content columnOpen in the workshop

The workshop's own story, rendered here. The rail's places are MAFO's real navigation labels. It is 1023 px wide, more than this column holds — scroll the frame sideways, or open it in the workshop.

What it is for

Use when a product screen — MAFO and the Cabinet open with it, and iRTB and MobuppsX as designed. Do not use when the site (its nav is a top bar); a slide; a dialog or a settings panel (a Sheet or a Card). A screen that has the rail has the top bar too: the bar is where the breadcrumb, the search and the screen’s one action live, so the content below it opens with its own heading and not with a toolbar.

The rail carries the product, not the page — the places, the counts that wait, the signed-in person. The page carries itself: its title in the content, its actions in the top bar, its data in cards under the bar at the inset the foundation page states. See Grid & layout for the three canvases and the shell’s numbers drawn.

The components it is made of

One row per part: its job here, and when the part itself is the one to use. Its own page holds the rest — the markup, the modifiers, the measured rows.

Component	Its job in the arrangement	Use it when
Sidebar	the rail — a floating dark panel at the left, the product’s places in groups	a product screen — MAFO and the Cabinet open with it, and iRTB and MobuppsX as designed
Nav item	one place in the rail: a glyph, a label, a count when something waits, a chevron when it opens a group	composing Sidebar; a link in any dark rail
Topbar	the white card level with the rail’s inset: where you are, the search, the one action, the person	a product screen — under the page’s top inset, beside the Sidebar
Breadcrumb	where you are, as the path that got you here — the top bar’s left end	a page is two or more levels deep and the person may want to go back a level
Avatar	the signed-in person, at the bottom of the rail and at the end of the top bar	a person is shown — the current user in the shell, an author, a row’s owner, a chat participant (square)
Badge / Chip	a count on a rail item (yellow) and the notifications chip in the top bar	a status word on a KPI tile or a table row, a category tag on a card, a small count
Input group	the top bar’s search — one box, a glyph, filling between the breadcrumb and the controls	an input needs a unit, a scheme or a domain beside its text (prefix / suffix), an icon in front of it, or one action attached to it — subscribe, search, copy, apply a code
Select	the top bar’s date range	one option from a list too long to show as radios — about seven or more — or when space is tight
Button	the one action a product screen has — in the top bar, black, with its glyph	the one action a view exists for — submit, save, create

The rules that hold between them

• The rail floats. The product’s rail — a floating dark panel, not a full-height strip.
• The geometry is the foundation page’s, not this page’s. Rail 240 floating with 24 above and below; gutters 32 to the content and 32 on the right; the top bar level with the inset; cards 24 under it, three across at 24 gaps in the 896 column; 24 at the bottom.
• The top bar is a card, never a strip. Never: two primary buttons in the bar · a page title in the bar (Heading pair belongs to the content) · an edge-to-edge strip · a search without its glyph.
• One primary action in the bar, and the page title is not in it. Where you are on the left; search, the date range, the one action, notifications and the signed-in person on the right.
• The active item is a quiet wash, never an accent pill. Never: an accent pill for the active item · SemiBold labels · a count without a pill · a chevron on a link that opens a page.
• The breadcrumb is the path, and the current page is not a link. Never: the current page as a link · slashes as separators · a breadcrumb that repeats the sidebar’s active item alone.
• The shell sets the accent, once. MAFO’s accent mode is red — a consumer’s shell sets data-accent, because the accent roles have no mode-free value.
• Cards under the top bar. Card grids: three across in the 896 content column beside the rail, four across a 1200 page at 32 gaps (KPI tile’s contract); the deck’s rows of cards match heights by being one auto-layout row.