Navigation is usable on mobile

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.

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.

<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>}

• 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:

  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>
  )