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