WEB DESIGN / PAGE PATTERNS

Navigation That Gets Users Where They Need to Go

Navigation is the skeleton of your website. If users can't find what they're looking for in 3 clicks, they leave. We design navigation systems — from mega-menus for 500-page sites to clean mobile drawers for 5-page portfolios — that make every path obvious, every click intentional.

See Our Work

94%

Of users cite easy navigation as most important

Maximum clicks to reach any page

50%

Of sales lost because users can't find content

7±2

Maximum items in main navigation

NAVIGATION TYPES

6 Navigation Patterns We Design

Mega-Menu

Multi-column dropdown that shows all major sections at once. Categorized with headers, descriptions, and optional icons.

Best for: Large sites with 50+ pages. E-commerce, service businesses, SaaS.

Key detail: Can include featured content like latest blog post or promo banner.

Sticky / Scroll-Aware Header

Header that stays fixed, adapts on scroll — shrinks, changes background, hides/shows based on scroll direction.

Best for: Long pages, single-page sites, content-heavy blogs.

Key detail: Uses scrollY delta calculation with CSS transform: translateY for smooth hide/show.

Mobile Drawer (Hamburger)

Full-screen or slide-in panel triggered by hamburger icon. Touch-friendly with large tap targets.

Best for: Every mobile site. The standard mobile navigation pattern.

Key detail: Contains complete navigation with expandable sections and clear visual hierarchy.

Breadcrumb Trail

Secondary navigation showing the user's path: Home > Category > Subcategory > Current Page.

Best for: Deep-hierarchy sites (e-commerce, documentation, knowledge bases).

Key detail: Helps orientation, provides backward navigation, and generates SEO-friendly internal links.

Sidebar Navigation

Persistent left sidebar with collapsible sections. The primary navigation pattern for apps and dashboards.

Best for: SaaS dashboards, documentation, admin panels, knowledge bases.

Key detail: Collapsible to icon-only mode. Persistent across page navigation.

Command Palette

Keyboard-triggered search overlay where users type to find pages, actions, or content. Popularized by Notion and Linear.

Best for: Power users, SaaS products, developer-focused sites, large content sites.

Key detail: Cmd+K shortcut. Type to search pages, actions, or shortcuts instantly.

ANIMATIONS & EFFECTS

Navigation Micro-Interactions

JavaScript + CSS

Scroll-Direction Aware Header

Header hides on scroll down, reappears on scroll up. More screen space for content, nav available when needed.

When to use: Content-heavy pages where screen real estate matters.

GSAP + CSS

Mega-Menu Reveal

Smooth height animation with content fade-in and subtle stagger. Closes with delay to prevent flickering.

When to use: Large sites with multi-column dropdown navigation.

GSAP / Framer Motion

Mobile Drawer with Stagger

Full-screen overlay slides in. Menu items stagger-animate from top to bottom. Background page dims.

When to use: Every mobile navigation. Creates a polished, app-like feel.

IntersectionObserver

Active Section Indicator

Nav item highlights as user scrolls to its section. Small indicator slides to the active item.

When to use: Single-page sites, documentation with sidebar, anchor-based navigation.

CSS + JavaScript

Search Expand

Compact search icon expands into a full input field on click. Results appear as the user types.

When to use: Sites with search functionality. Keeps nav clean when search is not active.

BEST PRACTICES

Rules We Follow for Every Project

✓Maximum 7 items in primary navigation. Miller's Law: humans can hold 7 plus or minus 2 items in working memory.

✓Use descriptive labels, not clever ones. "Services" is clear. "What We Do" is ambiguous.

✓Logo always links home. Universal convention. Breaking it confuses users.

✓CTA button in the navbar. The primary conversion action should be visually distinct from navigation links.

✓Breadcrumbs on every page below the homepage. Improves orientation, navigation, and SEO.

✓Test at real content scale. Navigation that works with 5 items breaks with 50.

✓Touch targets 44x44px minimum. On mobile, links that are too small cause mis-taps.

✓Accessible keyboard navigation. Tab through all items. Arrow keys within dropdowns. Escape closes menus.

AWARD-WINNING EXAMPLES

Sites That Set the Standard

★

Stripe Navigation

Clean top nav with organized dropdowns. Left column of links, right column of featured content. Smooth transitions. Never overwhelming despite a large product suite.

★

Amazon Mega-Menu

The most battle-tested navigation on the web. Hierarchical category system with intelligent hover behavior. Serves billions of product categories.

★

Linear Command Palette

Cmd+K opens fast, keyboard-navigable search. Type to find pages, actions, or shortcuts. Blurs the line between navigation and search.

OUR PROCESS

How We Build It

Information Architecture

Card sorting exercise. Map all pages, group into categories, define hierarchy. Tree testing with 5-10 users.

Navigation Design

Design desktop and mobile in Figma. All states: default, hover, active, expanded, collapsed.

Development

Semantic HTML5 nav with ARIA attributes. CSS for layout and transitions. JavaScript for dropdown behavior.

Testing

Usability testing with real users. Accessibility audit. Performance testing (no layout shift).

Timeline: 2-3 weeks

Tech stack: CSS Grid, Flexbox, GSAP, Radix UI, Next.js App Router, ARIA

RELATED PATTERNS

Explore More Page Patterns

Hero Sections

The header sits above the hero; their relationship is critical.

Learn more →

Footer Systems

The other bookend of site navigation.

Learn more →

Blog & Editorial

Content sites need robust navigation for discovery.

Learn more →

Forms & Funnels

Navigation removal on form pages can double conversions.

Learn more →

FAQ

Common Questions

Should I use a hamburger menu on desktop?+

Generally no. Hamburger menus hide navigation behind a click, reducing discoverability. On desktop, visible navigation outperforms hidden menus. On mobile, the hamburger is the standard and expected.

How many levels of navigation should my site have?+

Maximum 3 levels (main nav, dropdown, sub-items). More than 3 levels means your information architecture needs restructuring. Users should reach any page in 3 clicks or fewer.

Ready to Design Navigation That Guides?

We'll analyze your site structure and design a navigation system that gets users where they need to go.

See Our Portfolio