skills/site-architecture/references/navigation-patterns.md
Detailed navigation patterns for different site types and contexts.
Best for: small businesses, simple SaaS, portfolios.
[Logo] Features Pricing Blog About [CTA Button]
Rules:
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:
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.
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] │
│ │
└──────────────────────────────────────────────────────────┘
Best for: simple sites, landing pages.
┌──────────────────────────────────────────────────────────┐
│ [Logo] │
│ © 2026 Company · Privacy · Terms · Contact │
└──────────────────────────────────────────────────────────┘
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 │
└──────────────────────────────────────────────────────────┘
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:
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]
Home > Features > Analytics
Home > Blog > SEO Category > How to Do Keyword Research
Home > Docs > API Reference > Authentication
Rules:
> or / (be consistent)<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" }
]
}
Standard for mobile. All nav items collapse into a menu icon.
Rules:
Best for: web apps, PWAs, mobile-first products.
┌──────────────────────────────────────┐
│ │
│ [Page Content] │
│ │
├──────────────────────────────────────┤
│ Home Search Create Profile │
│ 🏠 🔍 ➕ 👤 │
└──────────────────────────────────────┘
Rules:
/shop/widget-pro| 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 |
Internal links in navigation pass PageRank. Use this strategically: