designmotionhq

navigation

Navigation Patterns

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

Watch on Instagram

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.

Want Claude to build this correctly?

UX Engine gives Claude Code the senior-designer reasoning behind every pattern.

The Design System Blueprint

An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.

Get the Blueprint — free

The PDF, plus emails about new patterns and my tools. Unsubscribe anytime.

Related patterns