Navigation Is a Decision, Not a Default
Most interfaces inherit their navigation pattern from whatever the designer used last time, or whatever the framework ships with by default. That's how you end up with a sidebar on a three-page marketing site or a tab bar on a tool with forty distinct workflows.
Navigation isn't decoration. It's a structural promise to the user: here's where you are, here's where you can go, and here's how much mental effort that will cost you. Break that promise and every subsequent interaction suffers.
This post is a pattern catalog — twelve navigation patterns, each with a clear description, the conditions that make it the right call, and the red flags that mean you should look elsewhere.
The Catalog
1. Persistent Sidebar
A vertical panel, usually on the left, that stays visible as the user moves through the product. Destinations are listed with icons and labels.
Use when: The product has 5–15 top-level sections, users switch between them frequently, and screen real estate is available (typically desktop). Think dashboards, admin panels, SaaS tools.
Avoid when: You're on mobile without a collapse mechanism, or when users follow a strict linear path through content — a persistent menu becomes visual noise in that context.
2. Collapsible / Icon-Only Sidebar
Same structure as above, but the sidebar collapses to show only icons. Hovering or a toggle expands it.
Use when: Your user base is power users who learn icon meanings quickly, and you need to recover horizontal space for content-heavy views.
Avoid when: Your product has new or infrequent users. Unlabeled icons are a recognition failure waiting to happen — even familiar icons carry ambiguity without labels.
3. Horizontal Top Navigation
A bar across the top of the viewport with destination links. The classic web pattern.
Use when: You have 3–7 top-level destinations, content is document-like or marketing-oriented, and users scan left-to-right. Works well for public-facing sites.
Avoid when: You exceed seven items — the bar breaks, wraps, or forces dropdowns that obscure content. It also scales poorly as the product grows.
4. Mega Menu
A wide, panel-style dropdown triggered from a top nav item. Can contain grouped links, images, and short descriptions.
Use when: You have a large, flat information architecture with many peer-level destinations — e-commerce, news sites, large enterprise homepages.
Avoid when: Your hierarchy is shallow. A mega menu implies complexity; using it on simple sites makes navigation feel more overwhelming than it is.
5. Tab Bar (Mobile Bottom Navigation)
3–5 destinations pinned to the bottom of the screen as tappable icons with labels. The dominant pattern in native mobile apps.
Use when: You're building a mobile-first web app or PWA with 3–5 equally important top-level sections that users visit in any order. Thumb-reachable and always visible.
Avoid when: You have more than five destinations — additional tabs create cognitive overload. Also avoid on desktop-primary interfaces where the bottom strip feels out of place.
6. Horizontal Tab Strip (Content-Level)
Tabs rendered within a page or panel to switch between related views of the same subject. Different from global navigation — this is local navigation.
Use when: You need to show multiple facets of the same entity: a user profile with tabs for Overview, Activity, and Settings; a product page with Details, Reviews, and Specs.
Avoid when: The tabs represent genuinely separate destinations. Forcing unrelated content into a tabbed view creates a false sense of relationship between sections.
7. Breadcrumbs
A horizontal trail showing the user's current location within a hierarchy: Home > Products > Shoes > Running.
Use when: Your content lives in a deep, tree-structured hierarchy — e-commerce categories, documentation, file systems. Breadcrumbs answer "where am I?" without the user having to think.
Avoid when: Your site is flat or only one or two levels deep. Breadcrumbs add visual weight without payoff if every trail reads Home > Page.
8. Stepper / Progress Navigation
A linear sequence of named steps displayed horizontally or vertically, with the current step highlighted and completed steps marked.
Use when: The user is completing a multi-step process with a defined order — checkout, onboarding, form wizards. The stepper sets expectations and shows progress.
Avoid when: Steps can be completed in any order, or when the flow is short enough to fit on one screen. A three-field form with a four-step stepper is UX theater.
9. Hamburger Menu
An icon (three horizontal lines) that toggles a hidden navigation panel. Ubiquitous on mobile.
Use when: You genuinely have no room for persistent navigation — typically on mobile viewports for secondary or auxiliary links. Acceptable for infrequently used destinations.
Avoid when: The hidden menu contains your most critical navigation. Hiding primary actions behind a hamburger reduces discoverability and increases time-to-navigate. If users need it constantly, it shouldn't be hidden.
10. Command Palette
A keyboard-triggered modal (usually Cmd+K or Ctrl+K) with a fuzzy search input that lets users jump to any destination or trigger any action by typing.
Use when: Your tool has a large number of actions and destinations, and your users are power users who prefer keyboards. Popularized by VS Code, Linear, Raycast, and Notion. Dramatically speeds up expert workflows.
Avoid when: Your users are non-technical or infrequent visitors. A command palette is invisible until you know it exists — it supplements navigation, it rarely replaces it. Always pair it with visible navigation for new users.
11. Contextual / Floating Action Button (FAB)
A prominent circular button, usually bottom-right, that triggers the primary action on a screen. Sometimes expands into a small menu of related actions.
Use when: There is a single, dominant action on a screen that users will perform repeatedly — compose, add, create. Common in mobile-first interfaces.
Avoid when: You have multiple equally important actions. Turning the FAB into a menu of five options defeats the purpose of having a single prominent affordance.
12. Pagination vs. Infinite Scroll vs. Load More
Technically these are content navigation patterns rather than structural navigation, but they govern how users move through large data sets — and they're consistently misused.
- Pagination: Use when users need to return to a specific position (search results, admin tables, filtered lists). A user who found something on page 4 can get back to page 4.
- Infinite scroll: Use when content is consumable and positional memory doesn't matter — social feeds, image galleries. Never use on e-commerce or search results where users compare and backtrack.
- Load More button: The compromise. Preserves scroll position, gives users control, works well for feeds where users want some but not infinite content.
The Meta-Pattern: Combine With Intention
Most mature products use multiple navigation patterns simultaneously — and that's fine. A sidebar for global navigation, tab strips for local context switching, breadcrumbs for deep hierarchy, and a command palette for power users is a coherent, layered system. The failure mode is layering by accident: a sidebar and a top nav and a hamburger menu, all pointing to different subsets of the same destinations.
Every navigation pattern you add is a new question users have to answer: which of these should I use right now? Make sure the answer is always obvious.
A Quick Decision Framework
- How many top-level destinations? Under 5 ? top nav. 5–15 ? sidebar. Over 15 ? reconsider your IA before choosing a pattern.
- How often do users switch destinations? Constantly ? persistent navigation. Rarely ? hamburger or secondary nav is fine.
- Who are the users? Power users ? invest in a command palette. General public ? make everything visible and labeled.
- What device? Mobile ? tab bar or hamburger. Desktop ? sidebar or top nav. Both ? responsive collapsing sidebar or separate mobile bottom nav.
- Is the flow linear? Yes ? stepper. No ? standard navigation.
Final Thought
Navigation patterns aren't about aesthetics — they're about cognitive load management. The best navigation is the one users don't notice because it always puts them exactly where they expected to be. Run through this list the next time you're starting a project or auditing an existing one, and ask not "what looks good" but "what makes the right things obvious."
If you're using vanilla JS and need to implement any of these — particularly the command palette or collapsible sidebar — those are worth a dedicated post. Let me know in the comments which one you'd find most useful.
