# Find Parts Megamenu — Reasoning & Recommendations **Companion to:** [feature-design-guidelines.md](feature-design-guidelines.md), [USAClean_Sitemap_Recommendations.md](USAClean_Sitemap_Recommendations.md), [USAClean_IA_Search_Roadmap.md](USAClean_IA_Search_Roadmap.md) **Live preview:** Showcase at https://demo.thecxlabs.com/v2/megamenu.html · in context on https://demo.thecxlabs.com/v2/index.html **Date:** May 2026 This document explains the full Find Parts megamenu build — the production-grade navigation system that grew out of the demo the client approved — and how it maps to the recommended taxonomy and to BigCommerce Stencil's capabilities. --- ## TL;DR Build the complete top-nav as: **Find Parts** = a full-bleed megamenu (Find by machine + by brand + by category + a promoted strip), and **Equipment / Chemicals & Supplies / Service / Resources** = lighter compact dropdowns, with **About** as a plain link. The same panels collapse into a mobile accordion (two taps to any leaf). Every node maps to the [sitemap recommendations](USAClean_Sitemap_Recommendations.md). The interaction (click-open, one-at-a-time, keyboard-accessible) was proven in the demo. This build wires it to the full taxonomy and extends the pattern across the whole nav. | Phase | Scope | Effort | |---|---|---| | **Phase 1** _(this build)_ | Find Parts megamenu + 4 secondary dropdowns + mobile accordion, hand-authored against the taxonomy in a custom Stencil header template. | **Medium** — custom theme template + JS; no app | | **Phase 2** _(data-driven)_ | Wire the category columns to the live BC category tree; wire the Find-by-Machine form to the compatibility lookup; personalize the featured card with the signed-in fleet. | Medium — Stencil + Storefront/GraphQL APIs | | **Phase 3** _(replatform)_ | Fully dynamic, personalized, instantly-rendered nav on Catalyst — fleet-aware ordering, server-rendered, no layout shift. | Higher — Catalyst replatform candidate | --- ## Current state The demo proved a single **Find Parts** megamenu (Find by machine / by brand / by category) with click-open behavior the client liked. The other five nav items were plain links with no menus. On mobile, the one megamenu rendered inline but the other sections had nothing to expand. The job now: turn the demo into the **full** nav — complete taxonomy in Find Parts, real menus for the other intent-led sections, and a proper mobile accordion — without losing the clean interaction the client approved. --- ## References The taxonomy and nav structure are grounded in the competitor + research work already documented in the [sitemap recommendations](USAClean_Sitemap_Recommendations.md): - **Sweepscrub** — brand→model is the dominant parts-discovery pattern (70+ Tennant model pages), but they have no model-lookup intercept. The megamenu's featured "Find by machine" panel is how USA Clean leapfrogs them. - **Southeastern Equipment** — separate Chemicals top-level + Service as a first-class section. Both reflected in the nav. - **Baymard B2B research** — Year/Make/Model lookup intercepts intent at step one; this is the featured panel's whole reason for existing. - **Megamenu UX best practice** (NN/g, Baymard) — click-to-open beats hover for accessibility and touch; group large taxonomies into labeled clusters; keep the panel scannable (the 5 category groups follow this). --- ## What BC Stencil gives us The stock **Cornerstone** theme renders the top nav from the **category tree**: - **`categoryTree` / `category` context** — Stencil exposes the catalog category hierarchy to the theme. The stock header (`templates/components/common/header.html` → `navigation.html`) iterates it to render a simple dropdown nav. - **Category metadata** — categories have name, URL, image, description, and (via the Catalog API) **custom fields**, which we use to group the 40+ part categories into the five clusters (Consumables / Drive & Motion / Electrical / Power / Structural). - **Theme template overrides** — the entire header/nav is a Handlebars template we can replace with the Caster markup. This is where the megamenu + dropdowns live. - **Storefront GraphQL / REST** — the Find-by-Machine form and the signed-in fleet personalization (Phase 2) pull from the catalog + customer APIs. - **Stencil CDN + bundling** — the nav JS (click-open, accordion) ships in the theme bundle. **Sources:** [BC Stencil Theme Structure](https://developer.bigcommerce.com/docs/storefront/stencil/themes/structure), [Cornerstone header/navigation](https://github.com/bigcommerce/cornerstone/blob/master/templates/components/common/header.html), [Categories API + custom fields](https://developer.bigcommerce.com/docs/rest-catalog/categories), [Storefront GraphQL](https://developer.bigcommerce.com/docs/storefront/graphql). --- ## Stencil limitations - **The stock Cornerstone megamenu is a thin category dropdown.** It renders the category tree as nested lists — no featured panel, no promoted cards, no embedded forms, no multi-column grouped layout. Everything richer than a category list is a custom theme build. This nav is **custom theme work**, not a config. - **No model-lookup form in the nav natively.** The "Find by machine" brand/model selector is custom UI wired to the compatibility data; Stencil has no native YMM widget. - **No native category grouping into named clusters.** Categories are a flat-ish tree; grouping them into Consumables / Drive & Motion / etc. requires either a custom field convention on each category or a hard-coded grouping map in the theme. - **No native promoted-content slots in the nav.** The promoted strip (diagrams, aftermarket, bulk reorder) is custom markup, not a Page Builder region. - **Mobile accordion is custom JS.** The stock theme has a basic mobile nav; the two-taps-to-leaf accordion behavior + the sticky-header clearance are custom. - **Personalization (signed-in fleet in the nav) is not a stock feature.** Phase 2 wires it via the customer + catalog APIs; Phase 3 does it cleanly server-side on Catalyst. The throughline: **BC gives us the category data and the template hook; the rich megamenu UX is a custom theme layer on top.** That's expected and fine for Phase 1 — but it's also why the fully-dynamic, personalized version (Phase 3) is a Catalyst candidate. --- ## App marketplace shortlist | App / option | What it does | Worth it? | |---|---|:---:| | **Custom Stencil header template** (this build) | Full control over markup, taxonomy mapping, promoted content, forms, accordion. Matches Caster exactly. | ✅ The path — this is the only option that delivers the approved design. | | **Mega Menu builder apps** (various marketplace) | Drag-and-drop megamenu config, usually injecting their own markup + styles. | Skip — they fight Caster styling, can't host the model-lookup form, and lock the nav config in a third-party UI. | | **IntuitSolutions / agency custom nav** | Agency-built custom megamenu (same approach as this build, outsourced). | Reference only — validates that custom-theme is the standard path for this level of nav. | | **Page Builder** | BC's visual content editor. | Not applicable — Page Builder edits page content regions, not the global header nav. | The marketplace has no drop-in that delivers a taxonomy-driven megamenu with a model-lookup form and promoted content while matching a design system. Custom theme work is the correct call. --- ## Caster impact New patterns added to the design system (`components.css`), all annotated in the megamenu CSS block: - **`.mega-promo` + `.mega-promo__card`** — the full-width promoted strip beneath the Find Parts columns (diagrams, aftermarket, browse-all, bulk reorder). 4-up on desktop, stacks on mobile. - **`.nav-menu` (+ `.nav-menu--2col`)** — the lighter compact dropdown for the four secondary sections. Positioned under its trigger; visibly secondary to the full-bleed megamenu. - **`.primary-nav__group` (+ `.primary-nav__group--mega`)** — the positioning wrapper. The base is `position: relative` (so compact dropdowns anchor under their trigger); the `--mega` modifier is `position: static` so the Find Parts panel still resolves full-bleed against `.primary-nav` **while** rendering directly after its trigger in the DOM — which is what makes the mobile accordion work for Find Parts too. - **Mobile accordion** — the existing `@media (max-width: 767px)` nav block now restyles `.nav-menu` and `.mega-promo` to render inline; the drawer's `padding-top` is set in JS to the live header height so the first item clears the sticky header. **Reused JS contract:** every panel (megamenu + dropdowns) uses the same `data-mega-trigger` / `data-mega-panel` attributes, so the existing click-open handler drives all of them with no per-panel code. The only JS additions: the drawer header-clearance offset, and extending the drawer-close selector to cover the new leaf links. **Downstream impact:** any v2 page that adopts the full nav inherits these patterns. The four secondary dropdowns are currently homepage-only (+ the showcase); rolling them to all pages is a markup copy, no new CSS. When these patterns gain a second consumer beyond the nav, promote them to a Caster `/patterns/` showcase page. --- ## Phased recommendation ### Phase 1 — Ship the full nav (this build) Hand-author the megamenu + four dropdowns + mobile accordion in a custom Stencil header template, with the category columns and promoted strip populated against the taxonomy. Static content is fine for launch — the taxonomy is stable. **What "winning" looks like:** the search-to-browse ratio shifts as the model-lookup featured panel intercepts intent; bounce on category landing pages drops; mobile nav engagement (drawer opens → leaf taps) is healthy; fewer "where do I find X" support contacts. ### Phase 2 — Wire it to live data - **Category columns** read from the live BC category tree (so adding a category in admin surfaces it in the nav without a code change), grouped via a category custom-field convention. - **Find-by-Machine form** wired to the compatibility lookup so brand→model→parts works end to end (overlaps with the Model Landing Pages + compatibility data work). - **Signed-in personalization** — the featured card shows the buyer's registered fleet (already prototyped on the signed-in homepage). **Trigger:** Phase 1 is live and the category tree is changing often enough that hard-coded columns become a maintenance cost, or the Find-by-Machine compatibility data lands. ### Phase 3 — Catalyst (replatform candidate) The fully dynamic, personalized nav — fleet-aware category ordering, server-rendered with no layout shift, instant open — is cleanest on a headless React storefront. Stencil can do Phase 1 + 2 well; the personalization-heavy, performance-sensitive version is where Catalyst earns its keep. Pair this with the other Catalyst candidates (interactive diagrams, personalized parts prioritization) rather than replatforming for the nav alone. --- ## Implementation notes ### Stencil build (Phase 1) - Replace the Cornerstone nav partial with the Caster nav markup (`templates/components/common/header.html` + a `megamenu.html` partial). - Group categories into the five clusters via a `nav_group` custom field on each category, or a grouping map in the theme config if custom fields are overkill. - The model-lookup form posts to the parts-by-machine route; until the compatibility API is wired (Phase 2), it can route to a filtered PLP. - Ship the click-open + accordion JS in the theme bundle (the prototype's `app.js` megamenu handlers are the reference implementation). ### Accessibility - Triggers are real `