navigation-patterns

Detailed navigation patterns for different site types and contexts.

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"