The mega-menu is the single most SEO-critical part of the whole rebuild. The previous JS-heavy build hid the site's internal linking behind client-side rendering and on-tap fetching, which is a large part of what caused the traffic collapse. This spec exists mainly to stop that happening again.
It's a shared header — one canonical block reused across the homepage and every other page so they cannot drift. Source: the mega-menu region in vapehub-homepage-src/handover/vapehub-homepage.html (fenced with SHARED · MEGA-MENU HEADER begin/end comments — CSS, IA data, behaviour).
<a href> inside a semantic <nav>. View-source with JS disabled must show every link — every top-level hub, every panel link, every brand, every flavour facet.Everything — desktop panels, mobile lists, nav, drawer — generates from one MENU array (plus BRANDS_ALL, BRANDS_KIT, BRANDS_ELIQUID, FLAVOURS). One source; the server renders all surfaces from it.
Top-level order: New In · Vape Kits ▾ · Pods & Coils ▾ · E-Liquids ▾ · Pouches & Alternatives ▾ · Brands ▾ · Deals · Guides ▾.
<a href> to its hub — including the six with panels. The chevron is a separate <button aria-haspopup aria-expanded> inside the link: hover/focus opens the panel, clicking the label navigates to the hub, clicking the chevron opens without navigating, touch (hover:none) first-tap opens. This is what makes the hub URLs (/vape-kits/, /prefilled-pods/, /e-liquids/, /nicotine-pouches/, /brands/, /blogs/) crawlable and clickable — the earlier build rendered these as <button>, so they were not links at all.All + A–Z strip; letters with no brand are disabled, not omitted (keeps the grid uniform). Popular-Brands columns get the grouped rows without a strip.input[type=search] with aria-controls on its wall. Text search and the letter strip are pure in-place filters over already-present DOM nodes (display:none on non-matches) — neither fetches nor gates the list. Typing clears the letter selection; the live count updates; an inline "No brands match" shows when empty./brand/<slug>/ directory (27 live pages). Flavour links use the real /e-liquids/<flavour>/ facets (10 pages). No # anchors, no dead links. Where a facet URL doesn't exist yet, the prototype points at the parent collection — create the facet pages later as the follow-on SEO play; no new pages are required to ship the menu.aria-expanded, Esc closes and returns focus to the trigger, open item shows a mint bottom border. Panels are anchored to the nav bar and span its width (wide Brands/E-Liquid walls never clip). Height capped at min(80vh, 780px) with the column block as one scroll region and the quick-link row pinned — every link stays reachable.prefers-reduced-motion respected.