| name | navigation-design-patterns |
| description | Use when designing or auditing a marketing site navigation. Covers sticky nav vs scrolling, logo placement, link order, sign-in/sign-up CTAs, mobile patterns, and the underused 'mega nav.'
|
Navigation Design Patterns
Nav is high-real-estate. Get it wrong and users bounce within 5 seconds.
Sticky vs scrolling
Sticky nav is the modern default. Stays visible as user scrolls. Use backdrop-blur for elegance on dark backgrounds.
Scrolling nav (disappears on scroll) only works for very long-form landing pages where you want immersion. Risky.
Logo placement
Left side, almost always. Center-logo is a design choice for special brands (Apple, Vercel sometimes) but adds risk.
Logo should:
- Be 32-48px tall in nav (smaller than people think)
- Have visible left-padding for breathing room
- Link to home page
Link order
From left (next to logo) to right:
- Product info (Pricing, Features, Use cases)
- Company info (Customers, About, Blog)
- Resources (Docs, Help, Status)
- Sign-in (text link)
- Primary CTA (Start free / Sign up / Get demo)
Sign-in and CTA at far right.
CTA in nav
Primary CTA always present. Should match the primary CTA pattern from the hero (same color, same wording).
Common: ghost "Sign in" + solid "Start free" right next to it.
Mega-nav
For SaaS with many features/products, a hover-revealed mega nav is current best practice. Pattern:
- Hover on top-level link reveals a panel
- Panel has 3-4 columns of grouped sub-links
- Includes a featured-content area (latest blog post, demo CTA)
Anti-pattern: Mega nav on a 5-page site. Use simple links.
Mobile patterns
| Pattern | When |
|---|
| Hamburger menu | Most sites |
| Bottom tab bar | Only when site is app-like |
| Slide-out drawer | When 8+ nav items |
| Full-screen overlay | Most modern, dramatic |
Hamburger menu items should be 16-18px font with 16-24px vertical spacing — easier thumb targets.
Common mistakes
- Logo right, CTA left — reverse Western convention, confuses
- 8+ nav links — pick 5 max
- Pricing buried in dropdown — should be top-level
- No visible Sign-in (forces user to find it)
- CTA color same as nav text (no contrast)
- Sticky nav opaque on white pages — should be backdrop-blur'd
Where this fits in X3 Compass
X3 Compass uses sticky nav with backdrop-blur on dark. Logo left, 7 nav links center, Sign-in + Start free right. Drops to hamburger below 700px.
