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.

B0

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.

B1

When "Product" is hovered/clicked:

B2

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.

B3

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.

B4

Minimal Footer

Best for: simple sites, landing pages.

B5

Expanded Footer

Best for: sites using footer for SEO (comparison pages, location pages, resource links).

B6

Sidebar Navigation

Documentation Sidebar

Persistent left sidebar with collapsible sections.

B7

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

B8

Breadcrumbs

Standard Format

B9

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

B10

Or use JSON-LD (recommended):

B11

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.

B12

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

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"