Don't Make Users Think (About Navigation)
Jakob's Law dominates SaaS navigation: users spend most of their time in other apps and expect yours to work the same way. This is a measurable predictor of adoption speed.
Primary Navigation: Sidebar
The established pattern for complex SaaS is a left sidebar for primary navigation with a top bar for context and utilities.
When to use sidebar vs. header-only navigation:
| Use Case | Pattern |
|---|---|
| Small number of sections, no secondary hierarchy | Header-only (top) navigation |
| Nested navigation (every real SaaS product) | Left sidebar |
IBM Carbon's guidance is definitive: the moment nested navigation is needed — and every real SaaS product needs it — use a sidebar.
Command Palette (Cmd+K)
The command palette is the power-user signature of modern SaaS. Linear, Superhuman, Slack, Figma, Notion, Vercel, and GitHub all implement it.
Essential design rules (from Superhuman's engineering team):
- The same keyboard shortcut opens the palette from anywhere in the app
- Pressing the shortcut again dismisses it and restores previous focus
- Show keyboard shortcuts next to listed commands to teach power users
- Make the palette context-aware — surface relevant actions based on current view
- Do not conflate search and command palette — if search is a core feature, it exists at the same structural level, not buried inside the palette
Multi-Tenancy and Org Switching
Three models dominate:
| Model | Example | Description |
|---|---|---|
| Single account, multiple orgs | GitHub | One user account added to multiple organizations |
| Separate accounts per org | Distinct accounts for each organization | |
| Hybrid (single account, multiple workspaces) | Linear, Notion | Single account, multiple workspaces |
Build for the hybrid model — it covers the widest range of products.
Placement:
- Sidebar header (Notion/Linear pattern)
- Top navigation (GitHub/Vercel pattern)
Visual differentiation is mandatory. Use workspace avatars or colors so users switching between workspaces know immediately which context they are in.
Breadcrumbs
Breadcrumbs are mandatory for any drill-down navigation.
Rules:
- If navigating from a parent to a child page, the child must have a clear way back (GitHub Primer)
- Any drill-down page includes a breadcrumb of the full path back to root level, placed above the page title (IBM Carbon)
Review Checklist
When reviewing or building navigation:
- Primary navigation uses a left sidebar (unless sections are flat with no nesting)
- Top bar reserved for context, utilities, and user account
- Command palette accessible via Cmd+K (or Ctrl+K) from anywhere
- Command palette is context-aware and shows keyboard shortcuts
- Search and command palette are not conflated (if search is a core feature)
- Workspace/org switcher uses visual differentiation (avatars, colors)
- Every drill-down page has breadcrumbs showing the full path back to root
- Navigation patterns match what users expect from comparable products