oborchers/saas-navigation

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 | Google | 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