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

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"