Navigation Patterns
Detailed navigation patterns for different site types and contexts.
Header Navigation
Simple Header (4-6 items)
Best for: small businesses, simple SaaS, portfolios.
[Logo] Features Pricing Blog About [CTA Button]
Rules:
- Logo always links to homepage
- CTA button is rightmost, visually distinct (filled button, contrasting color)
- Items ordered by priority (most visited first)
- Active page gets visual indicator (underline, bold, color)
Mega Menu Header
Best for: SaaS with many features, e-commerce with categories, large content sites.
[Logo] Product ▾ Solutions ▾ Resources ▾ Pricing Docs [CTA]
When "Product" is hovered/clicked:
┌─────────────────────────────────────────────────┐
│ Features Platform Integrations │
│ ───────── ───────── ──────────── │
│ Analytics Security Slack │
│ Automation API HubSpot │
│ Reporting Compliance Salesforce │
│ Dashboards Zapier │
│ │
│ [See all features →] │
└─────────────────────────────────────────────────┘
Mega menu rules:
- 2-4 columns max
- Group items logically (by feature area, use case, or audience)
- Include a "See all" link at the bottom
- Don't nest dropdowns inside mega menus
- Show descriptions for items when labels alone aren't clear
Split Navigation
Best for: apps with both marketing and product nav.
[Logo] Features Pricing Blog [Login] [Sign Up]
├── Marketing nav (left) ──────┘ └── Auth nav (right) ──┤
Right side handles authentication actions. Left side handles page navigation.
Footer Navigation
Column-Based Footer (Standard)
Best for: most sites. Organize links into 3-5 themed columns.
┌──────────────────────────────────────────────────────────┐
│ │
│ Product Resources Company Legal │
│ ───────── ────────── ───────── ───── │
│ Features Blog About Privacy │
│ Pricing Guides Careers Terms │
│ Integrations Templates Contact GDPR │
│ Changelog Case Studies Press │
│ Security Webinars Partners │
│ │
│ [Logo] © 2026 Company Name │
│ Social: [Twitter] [LinkedIn] [GitHub] │
│ │
└──────────────────────────────────────────────────────────┘
Minimal Footer
Best for: simple sites, landing pages.
┌──────────────────────────────────────────────────────────┐
│ [Logo] │
│ © 2026 Company · Privacy · Terms · Contact │
└──────────────────────────────────────────────────────────┘
Expanded Footer
Best for: sites using footer for SEO (comparison pages, location pages, resource links).
┌──────────────────────────────────────────────────────────┐
│ Product Resources Compare Use Cases │
│ Features Blog vs Competitor A For Startups │
│ Pricing Guides vs Competitor B For Enterprise│
│ API Templates vs Competitor C For Agencies │
│ │
│ Integrations Popular Posts │
│ Slack Zapier How to Do X │
│ HubSpot Salesforce Guide to Y │
│ Template: Z │
│ │
│ [Logo] © 2026 · Privacy · Terms · Security │
└──────────────────────────────────────────────────────────┘
Sidebar Navigation
Documentation Sidebar
Persistent left sidebar with collapsible sections.
Getting Started
├── Installation
├── Quick Start
└── Configuration
Guides
├── Authentication
├── Data Models
└── Deployment
API Reference
├── REST API
│ ├── Users
│ ├── Projects
│ └── Webhooks
└── GraphQL
Examples
├── Next.js
├── Rails
└── Python
Changelog
Rules:
- Current page highlighted
- Sections collapsible (expanded by default for active section)
- Search at top of sidebar
- "Previous / Next" page navigation at bottom of content area
- Sticky on scroll (doesn't scroll away)
Blog Category Sidebar
Categories
├── SEO (24)
├── CRO (18)
├── Content (15)
├── Paid Ads (12)
└── Analytics (9)
Popular Posts
├── How to Improve SEO
├── Landing Page Guide
└── Analytics Setup
Newsletter
└── [Email signup form]
Breadcrumbs
Standard Format
Home > Features > Analytics
Home > Blog > SEO Category > How to Do Keyword Research
Home > Docs > API Reference > Authentication
Rules:
- Separator:
>or/(be consistent) - Every segment is a link except the current page
- Current page is plain text (not linked)
- Don't include the current page if the title is already visible as an H1
With Schema Markup
<nav aria-label="Breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/features"><span itemprop="name">Features</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Analytics</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
Or use JSON-LD (recommended):
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Features", "item": "https://example.com/features" },
{ "@type": "ListItem", "position": 3, "name": "Analytics" }
]
}
Mobile Navigation
Hamburger Menu
Standard for mobile. All nav items collapse into a menu icon.
Rules:
- Hamburger icon (three lines) top-right or top-left
- Full-screen or slide-out panel
- CTA button visible without opening the menu (sticky header)
- Search accessible from mobile menu
- Accordion pattern for nested items
Bottom Tab Bar
Best for: web apps, PWAs, mobile-first products.
┌──────────────────────────────────────┐
│ │
│ [Page Content] │
│ │
├──────────────────────────────────────┤
│ Home Search Create Profile │
│ 🏠 🔍 ➕ 👤 │
└──────────────────────────────────────┘
Rules:
- 3-5 items max
- Icons + labels (not just icons)
- Active state clearly indicated
- Most important action in the center
Anti-Patterns
Things to Avoid
- Too many header items (8+): causes decision paralysis, nav becomes unreadable on smaller screens
- Dropdown inception: dropdowns inside dropdowns inside dropdowns
- Mystery icons: icons without labels — users don't know what they mean
- Hidden primary nav: burying important pages in hamburger menus on desktop
- Inconsistent nav between pages: nav should be identical across the site (except app vs marketing)
- No mobile consideration: desktop nav that doesn't translate to mobile
- Footer as sitemap dump: 50+ links in the footer with no organization
- Breadcrumbs that don't match URLs: breadcrumb says "Products > Widget" but URL is
/shop/widget-pro
Common Fixes
| Problem | Fix |
|---|---|
| Too many nav items | Group into dropdowns or mega menus |
| Users can't find pages | Add search, improve labeling |
| High bounce from nav | Simplify choices, use clearer labels |
| SEO pages not linked | Add to footer or resource sections |
| Mobile nav is broken | Test on real devices, use hamburger pattern |
Navigation for SEO
Internal links in navigation pass PageRank. Use this strategically:
- Header nav links are strongest — put your most important pages here
- Footer links pass less value but still matter — good for comparison pages, location pages
- Sidebar links help with section-level authority — good for blog categories, doc sections
- Breadcrumbs provide structural signals to search engines — implement with schema markup
- Don't use JavaScript-only nav — search engines need crawlable HTML links
- Use descriptive anchor text — "Analytics Features" not just "Features"