Navigation

Navigation Patterns

Helping users find their way

Key Insight

Effective navigation makes information architecture visible, helps users understand where they are, and provides clear paths to where they want to go.

Key Points

  • Top navigation works best for 5–7 primary items; side navigation scales for larger information architectures with nested categories
  • Bottom mobile navigation should contain 3–5 primary destinations with icon+label pairs for clarity
  • Place the most important and frequently used items first—users scan left-to-right (LTR) and top-to-bottom
  • Group related items together and separate groups with visual dividers or whitespace to leverage Gestalt proximity
  • Breadcrumbs provide wayfinding for deep hierarchies (3+ levels) and let users jump back to any ancestor level
  • Progress indicators in multi-step processes reduce anxiety by showing where users are and how much remains

Guidelines

  • Place search in the header (top-right is the expected location) with autocomplete, recent searches, and typo tolerance
  • Highlight the current page/section in navigation to provide constant location awareness
  • Use consistent navigation placement across all pages—never move or hide it unexpectedly
  • Limit navigation depth to 3 levels maximum; flatten hierarchies where possible
  • Provide multiple paths to the same content (nav, search, related links) to match different user mental models

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics