Navigation pattern decision tree — tabs vs sidebar vs mega menu
Views
9.6K
Copies
1.8K
Likes
1.8K
Comments
0
Copy rate
19.0%
Prompt
You are a principal product designer advising a team building a [product_type] with [entity_count] top-level sections and [user_type] as the primary users.
Build a structured decision framework that helps the team choose between tabs, sidebar, top nav, mega menu, and command palette as their primary navigation pattern. Include:
1. A decision tree with concrete yes/no questions
2. For each pattern: when it shines, when it fails, and the signals that should make a team switch
3. Mobile considerations for each pattern
4. Discoverability vs density tradeoffs, with research references
5. A recommended pattern for the team described above with specific justification
Be opinionated. Too many nav posts are wishy-washy.Customise this prompt
Fill in 3 variables to personalise this prompt
Preview
You are a principal product designer advising a team building a [product_type] with [entity_count] top-level sections and [user_type] as the primary users.
Build a structured decision framework that helps the team choose between tabs, sidebar, top nav, mega menu, and command palette as their primary navigation pattern. Include:
1. A decision tree with concrete yes/no questions
2. For each pattern: when it shines, when it fails, and the signals that should make a team switch
3. Mobile considerations for each pattern
4. Discoverability vs density tradeoffs, with research references
5. A recommended pattern for the team described above with specific justification
Be opinionated. Too many nav posts are wishy-washy.
Example output
# Choosing Your Primary Navigation — A Decision Framework
Most teams pick their navigation pattern on vibes. That is how you end up with a sidebar holding 18 items, three of which nobody has clicked in six months. Navigation is not decoration. It is the skeleton of information architecture, and the wrong skeleton warps every downstream decision.
## The Decision Tree
**Q1: How many top-level destinations does your product have?**
- 2-4 → Tabs (top-level) or top nav
- 5-8 → Sidebar (collapsed by default) or top nav with a dropdown
- 9+ → Sidebar with grouping, or a command palette as the primary discovery tool with a minimal sidebar
**Q2: Are sections of the product equally important, or is there a primary workspace?**
- Equal → Tabs or top nav encourage horizontal browsing
- One primary surface → Sidebar keeps it always visible while users work
**Q3: How frequent is cross-section navigation?**
- Rare (user parks on one surface for a session) → Tabs are fine
- Frequent (user hops between projects, inboxes, dashboards) → Sidebar wins; cursor travel cost matters
**Q4: Is the primary user a new user discovering features, or a power user running the same flows hundreds of times a week?**
- Discovery-heavy → Mega menu with labels and descriptions
- Power-user-heavy → Command palette plus a minimal sidebar; hide the menu weight entirely
**Q5: Does your product have deep nested hierarchies (folders inside folders)?**
- Yes → Sidebar with tree expansion
- No → Tabs or top nav
## When Each Pattern Shines and Fails
**Tabs** shine when sections are peers, mutually exclusive, and finite. Tabs fail the moment you have more than five because line wrapping or scrolling kills scannability. Tabs also fail for deeply nested content — nested tab bars feel like a bureaucratic hallway.
**Sidebar** shines when the user returns to the navigation surface dozens of times per session. The always-visible affordance lowers cognitive load for power users. It fails when items multiply unbounded; the sidebar becomes a graveyard of legacy features. It also fails on small screens without real effort — a collapsed rail with icons requires excellent iconography.
**Top nav** shines for marketing-adjacent products and content sites where horizontal browsing is natural. It fails the moment you exceed 6-7 items; responsive behavior (hamburger) kills discoverability on tablet widths.
**Mega menu** shines for sprawling product catalogs and enterprise suites with many dormant features. Research from the Nielsen Norman Group shows mega menus outperform small dropdowns for discoverability by 36%. They fail when designers treat them as opportunities to dump every feature; if users cannot scan a mega menu in 3 seconds, it is a graveyard.
**Command palette** shines for power tools where users know what they want and would pay money to skip the clicks. Linear, Notion, Superhuman, and GitHub have trained a generation to hit Cmd+K. It fails as a *primary* pattern because new users do not know it exists; it must be paired with a visible nav.
## Mobile Considerations
Tabs translate to bottom tab bars on mobile, the most natural pattern in iOS and Android. Limit to five. Sidebars become drawer menus on mobile — acceptable but slower. Mega menus collapse to accordion lists, losing most of their benefit. Command palettes on mobile are surprisingly viable with a floating "Search everything" button.
## Discoverability vs Density Tradeoff
Every pattern sits on a spectrum. Sidebar and mega menu optimize for discoverability: more surface area, more labels, more help text. Command palette and minimal top nav optimize for density: fewer pixels, more signal, but you must already know what you want. New users need discoverability; frequent users punish it.
A product with a mixed audience should ladder: bottom tab bar or sidebar for discovery, plus a command palette for power.
## Recommended Pattern for a Mid-Sized B2B SaaS with Analyst Users
For a B2B SaaS with roughly 8 top-level sections, serving analysts who return daily:
Ship a **collapsible sidebar (icon rail by default, expanded on hover)**, combined with a **command palette (Cmd+K)**. The sidebar anchors the mental model — users always know where they are in the product. The palette removes the cost of deep navigation for the 20 flows they run every day. Skip the mega menu entirely; the content catalog is not broad enough to justify it. Skip tabs at the top level; you will outgrow them inside two quarters.
Do not hide the command palette. Put a persistent "Search everything · Cmd+K" hint in the top bar — discoverability of your discovery shortcut is the most underrated piece of nav design.