# Navigation is usable on mobile

- **Pattern:** `ab-001929` (`mobile-responsiveness.mobile-ux.mobile-navigation`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001929
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001929)

## Why it matters

A horizontal navigation bar with seven items needs roughly 700-900px of horizontal space. On a 375px phone, those items either overflow the viewport, shrink until labels overlap, or get truncated with ellipses. Navigation is the spine of a site — if users can't reach secondary pages, they bounce. A hamburger menu or bottom nav bar is the standard mobile pattern; both require a toggle state and a responsive breakpoint that swaps layouts.

## Severity rationale

High because broken navigation blocks access to every page beyond the current one, collapsing site depth on mobile.

## Remediation

Hide the desktop nav with `hidden md:flex` and show a hamburger button below `md`. Wire the button to a state variable that toggles the mobile nav panel. Put this in `src/components/navigation/header.tsx` or equivalent.

```tsx
<ul className="hidden md:flex gap-6">{/* desktop */}</ul>
<button className="md:hidden" onClick={() => setOpen(!open)} aria-label="Toggle navigation">
  <MenuIcon />
</button>
{open && <ul className="md:hidden flex flex-col">{/* mobile */}</ul>}
```

## Detection

- **ID:** `mobile-navigation`
- **Severity:** `high`
- **What to look for:** Examine the navigation component. Check if the desktop navigation (horizontal menu with all items visible) is replaced or supplemented with a mobile-appropriate pattern at small screen widths: a hamburger menu that toggles a mobile nav, a bottom navigation bar, or a simplified navigation approach. Look for CSS that hides the desktop nav and shows a mobile alternative at breakpoints.
- **Pass criteria:** Count all navigation items in the primary navigation component. If the navigation has 4 or more items, it must have a mobile alternative: hamburger menu with functional toggle, bottom navigation bar, or a responsive breakpoint that collapses items. Navigation with no more than 3 items may display horizontally at all screen sizes without a mobile alternative. At least 1 mobile navigation strategy must be present when item count exceeds 3.
- **Fail criteria:** A full horizontal desktop navigation with 4 or more items has no mobile alternative and would overflow or become too small to use on phone widths below 640px.
- **Skip (N/A) when:** Site is a single-page app with no navigation, or has no navigation component at all — 0 navigation components found.
- **Detail on fail:** `"Desktop navigation shows 7 items horizontally with no mobile hamburger menu or breakpoint that collapses the nav — exceeds 3-item threshold for horizontal-only display"`.
- **Remediation:**

  ```tsx
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
    <nav>
      <ul className="hidden md:flex gap-6">
        {navItems.map(item => (
          <li key={item.href}><a href={item.href}>{item.label}</a></li>
        ))}
      </ul>

      <button
        className="md:hidden w-11 h-11 flex items-center justify-center"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        aria-label="Toggle navigation"
      >
        <MenuIcon className="w-6 h-6" />
      </button>

      {mobileMenuOpen && (
        <ul className="md:hidden flex flex-col">
          {navItems.map(item => (
            <li key={item.href}><a href={item.href}>{item.label}</a></li>
          ))}
        </ul>
      )}
    </nav>
  )
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001929