Patterns / App shell
Pattern
App shell
Side nav, status pill, a primary figure, and the fat footer on one canvas.
<section>
<p class="label">Example data</p>
<div data-part="side-nav"></div>
<div data-part="status-pill"></div>
<div data-part="fat-footer"></div>
</section>
The single-file button copies the composition with the stylesheet and script inlined.
When to use
- The product is an app with grouped sections.
- A status and an as-of line should persist.
When not to use
- The page is a single reading column.
- There is no repeated navigation.
Components
| Component | Role |
|---|---|
| Side nav | Grouped destinations with a new chip, a lock, and a number-key hint. |
| Status pill | A short open or closed state with a dot and a text label. |
| Fat footer | Link columns plus a stamp that says when the example data was fixed. |
Keyboard
| Key | Action |
|---|---|
| 1–7 | Selects a side-nav item inside the preview. |
| Tab | Moves from the nav to the status toggle and the footer links. |
Accessibility
- The same names and locks as the side nav.
- The status is text.
- Footer links are text.
Motion
- No extra motion beyond the pieces.
Pattern origin
Composition: app shell.