feat: classy dark one-pager with modal, webhook, shiny gold, sticky nav
This commit is contained in:
oliver
@@ -0,0 +1,305 @@
|
||||
# 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
|
||||
<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):
|
||||
|
||||
```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"
|
||||
Reference in New Issue
Block a user