Layout-driven · 2013–present
Sidebar App
A persistent left-rail navigation sidebar with a content area to its right — the canonical layout of modern productivity SaaS.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(98% 0.003 265) - --fg
oklch(16% 0.01 270) - --muted
oklch(54% 0.01 270) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.005 270) - --border
oklch(91% 0.006 270) - --accent
oklch(56% 0.2 268) - --accent-fg
oklch(100% 0 0) - --focus
oklch(56% 0.2 268)
| Token | Value |
|---|---|
| --font-body | 'Inter', system-ui, sans-serif |
| --font-display | 'Inter', system-ui, sans-serif |
| --font-mono | ui-monospace, 'JetBrains Mono', monospace |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 1px 2px oklch(0% 0 0 / 0.06) |
| --shadow-lg | 0 8px 24px oklch(0% 0 0 / 0.12) |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(98% 0.003 265);
--fg: oklch(16% 0.01 270);
--muted: oklch(54% 0.01 270);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.005 270);
--border: oklch(91% 0.006 270);
--accent: oklch(56% 0.2 268);
--accent-fg: oklch(100% 0 0);
--focus: oklch(56% 0.2 268);
--font-body: 'Inter', system-ui, sans-serif;
--font-display: 'Inter', system-ui, sans-serif;
--font-mono: ui-monospace, 'JetBrains Mono', monospace;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
--shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
}Where it came from
Origin: Slack, Linear, Notion — the SaaS productivity app layout pattern
Slack (2013) helped make the left-sidebar nav, long familiar from desktop mail clients, the default layout for multi-section SaaS apps. Linear, Notion, GitHub, and dozens of others followed. It organises a complex app into a fixed-width navigation rail and a wide content area, giving persistent wayfinding without a top header nav. The sidebar collapses on mobile to a drawer or icon rail. This layout assumes daily returning users who benefit from fast cross-section navigation.
How to spot it
- Fixed-width left navigation rail with workspace, section, and item hierarchy
- Wide content area to the right, taking most of the viewport
- Header incorporated into the content area or absent entirely
- Sidebar collapses on mobile to a drawer or a narrow icon-only strip
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Persistent navigation without occupying vertical space | Sidebar takes horizontal space that is expensive on small screens |
| Scales to many sections and workspaces without a complex header menu | Two navigation systems can compete: sidebar and breadcrumb/header |
| Users learn where things live quickly after a few sessions | Adapting to public or marketing pages requires a separate layout context |
In the wild
- Slack workspace and channel view
- Linear project and team navigation
- Notion workspace sidebar
Use it when
Multi-section productivity apps, admin tools, or dashboards where users navigate frequently between top-level destinations.