designmotionhq

navigation

Navigation Patterns

Five nav patterns, one system: mobile = tabs, desktop = sidebar.

Key insights

  • Bottom tabs are the mobile default: 3-5 top destinations, always visible and within thumb reach. Burying those same links in a hamburger drops engagement ~40%.
  • A persistent sidebar is the desktop answer for hierarchical content with 5+ sections — keep it in view, since collapsing it by default kills discoverability.
  • The hamburger is secondary navigation, never primary. It's acceptable on mobile, but hiding the menu on desktop drops engagement ~56%.
  • A command palette (Cmd K) is a search-driven accelerator for power users — pair it with visible nav, because new users don't know it exists.
  • Breadcrumbs only earn their space when the hierarchy runs deeper than 2 levels; on flat structures they add noise instead of orientation.
  • Choose by platform and depth, not taste — the whole set is one system, not five interchangeable options.

Do / Don't

  • Do: Match the pattern to the platform: bottom tabs on mobile, a persistent sidebar on desktop.
  • Do: Keep primary destinations visible — 3-5 for tabs, 5+ sections to justify a sidebar.
  • Do: Reserve breadcrumbs for hierarchies deeper than two levels.
  • Don't: Hide primary navigation in a hamburger — engagement drops 40-56%.
  • Don't: Make a command palette the only path to a feature; new users won't discover it.
  • Don't: Add breadcrumbs to a flat structure where they're just visual noise.

Get the next pattern first

New breakdowns land in your inbox before anywhere else.

One new pattern breakdown per week. No spam, unsubscribe anytime.

Related patterns