# 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 ```html ``` Or use JSON-LD (recommended): ```json { "@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"