← All 34 tasks · Navigation · Header nav
NAV-3Chat ASophieDeploy laneP1done

'Shop' hover mega-dropdown (categories + subcategories)

Element: HeaderV2 nav item 'Shop'
Source: Sophie Nagano · Jun 11, 4:08 PMTarget build: v234 (shipped)Depends on: NAV-1 · NAV-2

● Current state — verified on live v230

LIVE: HeaderV2.jsx NAV array has {label:'Shop', to:'/shop'} — a plain link. DOM probe hasShopDD=false. Legacy Header.jsx already has a navbars_categories layer + per-category submenu scaffold to reuse.

◎ Target outcome

Hovering Shop opens a mega-panel laid out like Sophie's mockup: each website category column with its subcategories beneath, every entry linking to /shop?cat=…&sub=….

✓ Output — closed & verified

CLOSED & VERIFIED. Shipped v233 → v234. Hovering Shop opens a mega-dropdown with all 8 website categories + subcategories (Sophie taxonomy), each linking to /shop?cat=&sub=. Chrome-verified the panel renders and the sub-links filter. Live: /v234/shop.

Assets, colours & references

Reference: Sophie's Shop hover-dropdown mockup (in her Jun 11 email) + the mapping sheet for category/subcategory structure.

Technical steps to achieve it

  1. Add a ShopMegaMenu component fed by taxonomy.js (NAV-1/2).
  2. Wire hover open/close on the Shop nav item in HeaderV2 (delay-close, keyboard + aria-expanded).
  3. Each category → /shop?cat=; each subcategory → /shop?cat=&sub=.
  4. Port the column grid layout from Header.jsx's categories scaffold; brand orange hover.

Files to change

src/components/HeaderV2.jsxsrc/components/ShopMegaMenu.jsx (NEW)src/components/HeaderV2.csssrc/config/taxonomy.js

Testing

  1. Canary: hover Shop → panel with all categories + subcats; click routes with cat+sub params.
  2. a11y: keyboard focus + ESC closes; prefers-reduced-motion.

Milestones

✓Spec'd from feedback
✓Source located
✓Code change
✓Local test (vitest + vite preview)
✓Canary verify + ship v234 (shipped)

Verify live

Current (live)v230/shopTarget (on ship)v234 (shipped)/shop

Progress URL updates here when this task ships to its target /vN/. Current column always points at the live baseline.

← NAV-2indexNAV-4 →