Navigation Bars
The primary navigation system of an application — global nav, sidebar, tab bars, and breadcrumbs. How to design for discoverability and wayfinding.
What is it?
Navigation is the system that allows users to move through an application and understand where they are. It includes global navigation (always visible), local navigation (contextual to the current area), and wayfinding cues (breadcrumbs, page titles, active states). Good navigation is invisible — users find what they need without thinking about it.
Why it matters
Navigation is the architecture users experience. If users can't find what they're looking for, it effectively doesn't exist. Poor navigation is the #1 cause of task failure in complex applications. It accounts for more usability failures than any other single component.
Best Practices
- Limit top-level navigation to 5–7 items (Hick's Law + Miller's Law).
- Always show users where they are — active state on nav items, breadcrumbs for deep pages.
- Use labels users understand, not internal product terminology or engineering names.
- Group related items together — don't force users to learn your organizational logic.
- Mobile bottom tab bar: 3–5 items maximum, icon + label, touch targets ≥ 44px.
- Active states must be unambiguous — the current page should be clearly highlighted.
- Sidebar navigation: collapsed state on small viewports, always show active section.
- Breadcrumbs for pages more than 2 levels deep. Home > Category > Item.
- Never move navigation between pages — consistency is navigation's most important property.
- Search complements navigation — it's a parallel path, not a substitute.
Common Mistakes
- Navigation labels that use internal product terminology unfamiliar to users.
- No active state — users don't know where they are.
- Too many top-level items — overwhelming users with choices at the global navigation level.
- Changing navigation between sections of the app — destroys spatial memory.
- Mobile navigation that is only accessible through a hamburger menu, with no persistent affordance.
- No breadcrumbs on deep pages — users are lost with no way to navigate up.
Checklist
Research & Theory
Krug's "Don't Make Me Think" — Navigation Chapter
Steve Krug's seminal work establishes that navigation must provide persistent answers to: Where am I? What's here? Where can I go? These must be answered at all times.
Why it's relevant
Navigation that cannot answer these three questions has failed. Test your navigation against these three questions with new users.
Real-World Examples
Linear
Sidebar navigation with persistent active states, keyboard shortcuts shown on hover, collapsed to icons on narrow viewports. Navigation is a product feature, not an afterthought.
Notion
Left sidebar navigation with nested pages, drag-to-reorder, and workspace switching. The breadcrumb at the top provides deep navigation context.
Stripe Dashboard
Sidebar with grouped navigation (Payments, Customers, Products). Active state is a filled left border. Navigation never moves between sections.