Compact header — interactive renders
Every frame below is live: scroll inside it (the header sticks, gains a shadow, and the menu stays exposed — no collapse, no desktop hamburger, per your call), hover Kitchen & Dining to see the full-width dropdown panel anchored beneath the single row, and in Option B click the search icon. Utility links stay in the topbar throughout.
Reference — today's two-row header
What's live now: logo + centered search + icon gap on row one, nav on row two. The bareness Sean flagged comes from the hidden cart/account icons Hyper designs this row around.
Built to earn shelf space.
“We focus on inspirational products for the home — dedicated to making every product we bring to market truly exceptional.”
Option A — single row · persistent compact search recommended v1
Logo → nav → quiet search field → dealer CTA. The search keeps Hyper's predictive form always reachable — zero new JS on the real build. Today's menu is 4 top levels; the width stress-test at the bottom proves the row holds as the taxonomy grows.
Built to earn shelf space.
“We focus on inspirational products for the home — dedicated to making every product we bring to market truly exceptional.”
Option B — single row · search icon that expands
Purest row — logo, nav, one icon, CTA. Click the magnifier: a full-width search takes over the row (Escape or ✕ closes). Costs a small, isolated JS/ARIA addition on the real build.
Built to earn shelf space.
“We focus on inspirational products for the home — dedicated to making every product we bring to market truly exceptional.”
Option C — Option A + “Become a Dealer” as a row CTA
Same as A, but the one action a B2B visitor must find — Become a Dealer — is promoted from the topbar into the row as the site's single accent button. It also remains in the topbar; the row simply makes the money-action permanent. This is the pattern most strong B2B catalogues run.
Built to earn shelf space.
“We focus on inspirational products for the home — dedicated to making every product we bring to market truly exceptional.”
Width stress-test — the menu this row must survive
Today's 4 top levels are the current state, not the final one — the v9 architecture (parked pending Michael's class update) will likely widen the nav. This frame runs 7 items in French — the longest realistic labels — in a single row at desktop width. If this fits, everything smaller fits. The plan's hard gate stays: if a future real menu ever fails at 1024px, we stop for a design decision (tighter tracking, fewer top levels, or the reserve two-row fallback) — never silent truncation.
7 niveaux · libellés français longs · un seul rang — et il respire encore.
How to choose
| Criterion | A · compact field | B · icon expand | C · A + row CTA |
|---|---|---|---|
| Build risk | Lowest — zero new JS | Small isolated JS/ARIA addition | Same as A + one link |
| Search discoverability | Always visible | One click away | Always visible |
| Visual quiet | High | Highest | High, with one deliberate accent |
| B2B conversion logic | Neutral | Neutral | Primary action always in reach |
| My read | Safest v1 | The prettiest row | Best B2B answer — it gives the row the purpose the cart icons left behind |
All three share the identical architecture from the master plan (same toggle, same backup, same QA) — the choice only affects the right end of the row. A → C is a settings-level change later; A/C → B adds the small search JS. Nothing is built until you pick.