Navigation Design Patterns for Web Applications
Navigation is the skeleton of your digital product. Poor navigation is the single most common reason users abandon products — if people can't find what they need, they leave. This article explains the key navigation patterns we design with.
Primary Navigation Patterns
- Top navigation bar: Horizontal bar with primary links. Best for desktop applications with 5–7 primary sections. Universally understood.
- Sidebar navigation: Vertical panel with hierarchical structure. Best for complex applications (dashboards, admin tools) with many sections and subsections.
- Bottom tab bar: Mobile standard. Provides access to 3–5 primary destinations with icons and labels. Used by every major mobile app.
- Hamburger menu: Hidden navigation triggered by an icon. Conserves screen space but hides options — use only when screen space is genuinely constrained.
Secondary Navigation
- Breadcrumbs: Show the user's location in the hierarchy. Essential for deep sites with multiple levels.
- Tabs: Switch between related views within a page. Best for content with a natural parallel structure.
- Step indicators: Show progress through a multi-step process. Essential for checkouts, onboarding, and multi-step forms.
Our Design Principles
Navigation should be: predictable (users know where to find things), labelled clearly (avoid jargon and clever names — clarity beats creativity), consistent across the product, and accessible by keyboard and screen reader.