Navigation

Last updated:

Practical patterns for clear labels, real links, mobile menus, keyboard access, and navigation that helps users move — not guess.

01 — Foundation

Navigation is infrastructure

Users rely on navigation to know where they are, what exists, and how to move on.

Navigation is not decoration or branding theatre. When it fails, trust collapses quickly. This pattern defines practical expectations for accessible, maintainable, predictable navigation — real usability, not menu performance art.

02 — Principles

Navigation should feel obvious

Good navigation feels invisible — predictable, calm, and reliable.

  • users understand where they are and where they can go
  • labels describe destinations, not marketing poetry
  • structure reflects information architecture, not org charts
  • fewer, clearer choices beat exhaustive sitemaps in the header

03 — Links

Navigation uses links — not buttons, divs, or JavaScript role cosplay.

Good

<a href="/services/">
    Services
</a>

Bad

<div onclick="goToPage('/services/')">
    Services
</div>

The browser already solved navigation. Use the solution.

04 — Structure

Primary navigation and labels

Primary nav should surface core destinations — not every page you have ever published.

Keep primary nav focused

  • core destinations and high-priority tasks
  • meaningful labels users recognise — Pricing, Contact, Documentation
  • visible current-page styling and aria-current="page" where appropriate

Avoid vague labels like “Solutions”, “Explore”, or “Platform ecosystem”. Users should not decode brand riddles to move around the product.

<nav aria-label="Main">
    <ul>
        <li>
            <a href="/standards/" aria-current="page">Standards</a>
        </li>
        <li>
            <a href="/patterns/">Patterns</a>
        </li>
    </ul>
</nav>

05 — Mobile

Mobile and hamburger menus

Mobile navigation should stay predictable, reachable, and easy to close.

  • large enough tap targets and obvious open/close controls
  • full keyboard access — including Escape to dismiss overlays
  • hamburger menus only when space genuinely requires them
  • visible navigation on large screens when it helps — minimalism is not a rule

Prefer a real button that toggles a nav landmark, not a div with a click handler. Enhance with JavaScript; keep links working in the markup.

06 — Keyboard

Keyboard access and focus

Accessibility is navigation quality.

  • logical tab order through the nav and any open submenus
  • visible focus on every interactive item
  • users are never trapped inside a menu overlay

Focus is infrastructure, not decoration. Never remove outlines without a stronger visible replacement.

07 — Dropdowns

Dropdowns, mega menus, and hover

Every dropdown adds complexity — use them when the IA genuinely needs them.

  • avoid hover-only menus — touch and keyboard users exist
  • avoid disappearing flyouts and nested submenu labyrinths
  • mega menus only with clear grouping, keyboard support, and scannable layout

If users need a map to navigate the menu, simplify the information architecture instead of adding another tier.

08 — Supporting

Breadcrumbs, skip links, and search

Quiet infrastructure that helps orientation and recovery.

  • breadcrumbs on large, nested, or ecommerce-style structures
  • a skip link to main content on every page — visible on focus
  • search that supports navigation — not a substitute for broken IA
  • sticky headers that help without consuming half the viewport on mobile

09 — Resilience

Performance and progressive enhancement

Navigation loads on almost every page — keep it fast and functional without JavaScript.

  • links work immediately — enhancement improves, it does not create navigation
  • avoid enormous hydrated nav systems and animation-heavy mobile menus
  • predictable structure, grouping, and semantics for assistive technology

Anti-patterns to avoid

  • div-based navigation with no semantics
  • fullscreen mobile nav treated as a cinematic experience
  • marketing labels nobody understands

10 — Review

Before you approve

A short checklist for navigation in code review.

  • real links with clear labels
  • current-page state visible and announced
  • mobile and keyboard navigation complete end to end
  • dropdowns usable without hover alone
  • skip link present; structure reduces cognitive load
  • navigation works without JavaScript

When in doubt, ask: Does this help users move confidently, or merely display the sitemap attractively? If the answer is “display attractively”, the navigation is not finished.