Canon Navigation

CANON · Navigation

Navigation is a promise: where am I, where can I go, how do I get back. Break any of the three and the user is lost.

Structural rules

Every page must answer three questions visually and semantically:

1. Where am I? — active state in the nav, breadcrumb or page title
2. Where else can I go? — primary nav visible or reachable in one tap
3. How do I go back? — browser back always works; "back" actions never leave them stranded

Top bar vs sidebar

Active state — not optional

Every nav item has two states at minimum: default and active. "Active" means "you are here." It must be unmistakable at a glance.

Active state options, in order of clarity:

1. Filled background + contrasting text
2. Left or bottom border in brand color (2–3px)
3. Bolder weight + color shift
4. Underline (text nav only)

Color shift alone is not enough — fails for color-blind users. Pair color with weight, underline, or background.

Sizing

Mobile menu (hamburger)

Hamburger is acceptable but comes with costs. Known: 30–50% lower discoverability vs visible nav (Luke Wroblewski research).

When hamburger is fine:

• Secondary nav items only (primary nav stays visible via tab bar or top bar)
• Settings and account sections
• Truly space-constrained

When hamburger fails:

• Hiding the only path to primary actions
• Content-heavy apps where users need to jump between sections often

Better alternatives on mobile:

• Bottom tab bar for 3–5 primary destinations
• Visible top bar with overflow menu for extras

Breadcrumbs

Home / Products / Electronics / Laptops / ThinkPad X1

Breadcrumbs are for hierarchical depth ≥ 3 levels. At 2 levels, they're noise.

• Use <nav aria-label="Breadcrumb"> wrapping an <ol>.
• Current page is the last item; aria-current="page" and not a link.
• Separator is decorative; aria-hidden="true".

Skip link — required

<a href="#main" class="skip-link">Skip to main content</a>

• First focusable element on every page.
• Visually hidden until focused (:focus reveals it).
• Jumps keyboard users past the nav to the content.
• WCAG 2.4.1 Bypass Blocks.

Semantic structure

<header>
  <a href="/" aria-label="Home">...</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main id="main">...</main>

<footer>
  <nav aria-label="Footer">...</nav>
</footer>

• Multiple <nav> elements allowed. Each needs a unique aria-label.
• Lists (<ul>) are the correct structure for nav items.
• <header> and <footer> at the page level; section-level headers don't need nav roles.

Keyboard behavior

For dropdown menus: use the WAI-ARIA menu or disclosure pattern, pick one, implement it fully.

Submenus and dropdowns

• Open on click, not hover. Hover menus break on touch and trap keyboard users.
• If hover is used for discoverability, still work on click, still work with keyboard.
• Submenus open toward the viewport center, not the edge.
• Close on: Escape, click outside, focus leaves.

Active state indicator math

Active color needs 3:1 contrast against the nav background — that's the WCAG 1.4.11 non-text contrast floor. A bottom-border at 2px wins against a dim tint at 1.5:1.

Anti-patterns

Decision tree

How many primary destinations?
  ├─ 3–5 mobile, 5–7 desktop → Top bar or tab bar
  ├─ 8–15 → Sidebar
  └─ > 15 → Sidebar with grouping / sections

Is there nested hierarchy?
  ├─ Yes → Breadcrumb + sidebar
  └─ No → Top bar is fine

Is the menu opening dropdowns?
  └─ Click-to-open, not hover. Always.

Hamburger menu on desktop?
  └─ Almost never. Only if space is genuinely exhausted.

Audit checklist

• Active state visible without relying on color alone
• Skip link is the first focusable element
• Nav is <nav> with aria-label
• Each <nav> has a unique label
• Tab target ≥ 44px on mobile
• Dropdowns open on click and work with keyboard
• Escape closes menus
• Focus-visible on every nav item
• Breadcrumb uses aria-current="page" on last item
• No nav inside <div> when <nav> applies

Sources

• WCAG 2.2 · 2.4.1 Bypass Blocks, 2.4.3 Focus Order, 2.4.7 Focus Visible, 1.4.11 Non-Text Contrast
• WAI-ARIA Authoring Practices · Menubar, Disclosure, Breadcrumb
• Luke Wroblewski · Obvious Always Wins (hamburger research)
• Apple HIG · Navigation Bars, Tab Bars
• Material Design 3 · Navigation bar, Navigation rail, Navigation drawer