01TL;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).
The interaction (click-open, one-at-a-time, keyboard-accessible) was proven in the demo the client approved. 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 category columns to the live BC category tree; wire Find-by-Machine to 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 |
02Current 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.
03References
The taxonomy and nav structure are grounded in the competitor + research work in the sitemap recommendations:
- Sweepscrub — brand→model is the dominant parts-discovery pattern (70+ Tennant model pages), but no model-lookup intercept. The 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; the featured panel's whole reason for existing.
- Megamenu UX best practice (NN/g, Baymard) — click-to-open beats hover for accessibility + touch; group large taxonomies into labeled clusters; keep panels scannable (the 5 category groups follow this).
04What BC Stencil gives us
The stock Cornerstone theme renders the top nav from the category tree:
categoryTree/categorycontext — Stencil exposes the catalog hierarchy to the theme. The stock header iterates it to render a simple dropdown nav.- Category metadata — name, URL, image, description, and (via the Catalog API) custom fields, which we use to group the 40+ part categories into the five clusters.
- Theme template overrides — the header/nav is a Handlebars template we replace with the Caster markup. This is where the megamenu + dropdowns live.
- Storefront GraphQL / REST — the Find-by-Machine form and 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.
05Stencil limitations
- The stock Cornerstone megamenu is a thin category dropdown. Nested lists only — no featured panel, no promoted cards, no embedded forms, no multi-column grouped layout. Everything richer is custom theme work.
- No model-lookup form in the nav natively. The brand/model selector is custom UI wired to compatibility data; Stencil has no native YMM widget.
- No native category grouping into named clusters. Grouping into Consumables / Drive & Motion / etc. requires a custom-field convention per category or a theme grouping map.
- No native promoted-content slots in the nav. The promoted strip is custom markup, not a Page Builder region.
- Mobile accordion is custom JS. The two-taps-to-leaf behavior + sticky-header clearance are custom.
- Personalization (signed-in fleet in the nav) is not stock. Phase 2 wires it via APIs; Phase 3 does it cleanly server-side on Catalyst.
BC gives us the category data and the template hook; the rich megamenu UX is a custom theme layer on top. Expected and fine for Phase 1 — and also why the fully-dynamic, personalized version (Phase 3) is a Catalyst candidate.
06App 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 |
| Mega Menu builder apps (marketplace) | Drag-and-drop megamenu config, usually injecting their own markup + styles. | Skip — fights Caster, can't host the form |
| IntuitSolutions / agency custom nav | Agency-built custom megamenu (same approach, outsourced). | Reference — validates custom-theme as the standard path |
| Page Builder | BC's visual content editor. | N/A — edits page content, not global nav |
No drop-in 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.
07Caster impact
New patterns added to components.css, annotated in the megamenu block:
.mega-promo+.mega-promo__card— the full-width promoted strip beneath the Find Parts columns. 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(+--mega) — the positioning wrapper. Base isposition: relative(compact dropdowns anchor under their trigger); the--megamodifier isposition: staticso the Find Parts panel resolves full-bleed against.primary-navwhile rendering directly after its trigger in the DOM — which makes the mobile accordion work for Find Parts too.- Mobile accordion — the existing
@media (max-width:767px)block restyles.nav-menuand.mega-promoto render inline; the drawer'spadding-topis set in JS to the live header height so the first item clears the sticky header.
Reused JS contract: every panel 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 additions: the drawer header-clearance offset, and extending the drawer-close selector to cover new leaf links.
08Phased recommendation
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 drawer engagement is healthy; fewer "where do I find X" support contacts.
Category columns read from the live BC category tree (add a category in admin → it surfaces in the nav, no code change), grouped via a category custom-field convention. Find-by-Machine form wired to the compatibility lookup (overlaps with Model Landing Pages + compatibility data). Signed-in personalization shows the buyer's registered fleet (already prototyped on the signed-in homepage).
Trigger: Phase 1 is live and the category tree changes often enough that hard-coded columns become a maintenance cost, or the compatibility data lands.
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 does Phase 1 + 2 well; the personalization-heavy, performance-sensitive version is where Catalyst earns its keep. Pair with the other Catalyst candidates rather than replatforming for the nav alone.
09Implementation notes
Stencil build (Phase 1)
- Replace the Cornerstone nav partial with the Caster nav markup (
header.html+ amegamenu.htmlpartial). - Group categories into the five clusters via a
nav_groupcustom field per category, or a grouping map in 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.jsmegamenu handlers are the reference implementation).
Accessibility
- Triggers are real
<button>s witharia-expanded+aria-controls; panels arerole="region"witharia-label. - Click-open (not hover) is itself an accessibility win — no hover-only content, works for keyboard + touch.
Esccloses any open panel; click-outside closes.- To finish for production: focus management (move focus into the panel on open, return to trigger on close) and arrow-key navigation. The prototype demonstrates the structure; these handlers are the production hardening.
Mobile
- The drawer is
position: fixed; inset: 0; JS sets itspadding-topto the live sticky-header bottom on open so the first item clears the header (handles scroll-0 and scrolled states since body scroll is locked while open). - The sticky header's search bar serves as the "pinned search" the roadmap calls for (item 10) — no separate drawer search, to avoid duplication.
- One panel open at a time keeps the accordion tidy; two taps reach any leaf.
Analytics
Track trigger opens per section, leaf click-through, and Find-by-Machine form completion. The featured-panel click-through is the headline metric — it tells us whether the model-lookup intercept is working. On mobile: drawer open rate, section-expand rate, leaf-tap depth.
10Catalyst / replatform candidacy
Phase 1 + 2 ship in Stencil. A custom header template + category-tree binding + a model-lookup form are all within Stencil's reach. The build cost is real (custom theme work, not config) but it's the standard approach and no app shortcut preserves the design.
Phase 3 is a Catalyst candidate, but not on its own. The nav alone doesn't justify a replatform. But the personalized, fleet-aware, zero-layout-shift version shares its requirements with the other documented Catalyst candidates (interactive parts diagrams, personalized parts prioritization). When those tip the decision, the nav comes along — server components render the right categories and fleet ordering on first paint, which Stencil can only approximate with client-side JS.