Variation D · Navigation Library

Header archetypes, device-tested.

Six functional header patterns representing distinct industry use-cases. Every archetype ships with a live viewport switcher so clients can preview Desktop, Tablet, and Mobile behavior in real time — dropdowns, drawers, overlays, and mega-menus all fully interactive.

01 · Premium Editorial02 · Corporate SaaS03 · E-Commerce04 · Minimal Agency05 · Product Dashboard06 · Mega-Menu Portal

Not yet approved — do not build against this.

Navigation is unresolved. Navigation Library ships empty. Generate the option set, present it in the approved palette and typography, then record the winning variantId.

Record the approved choice in src/data/project-decisions.ts — the one file edited per project. Every route, library entry and export reads from it.

No entries yet

Navigation options

Navigation options are the header layouts put forward for this client's approval, rendered in the approved palette and typography. Client-facing.

3 options, exactly one marked recommended.

An entry must satisfy NavigationOption

export type NavigationOption = {
  id: string;
  name: string;
  recommended: boolean;               // exactly one option is true
  reasoning: string;
  uxRationale: string;                // client-facing benefit framing
  archetype: string;                  // which catalog archetype it derives from
  bbModule: "PowerPack Advanced Menu" | "UABB Off-Canvas";
  classField: string;                 // e.g. "section_is_masthead jcd_band_md jcd_width_wide"
  fieldExposure: {
    editable: string[];
    locked: string[];
    why: string;
  };
  deviceAdaptability: string;         // client-facing
  responsive: { xl: string; lg: string; md: string };  // dev-facing, token-referenced
  audience: "client" | "dev";
};

Generator

Run this once per client, with the client's inputs pasted in. The shared constraints travel with it automatically when you copy.

Shared constraints

CONSTRAINTS — these apply to every option you generate. A generated option that breaks
one of these is worse than no option, because it enters the library looking finished.

- Every value references a token. No literal hex, no arbitrary px. If a token does not
  exist, say so and stop — do not invent one.
- Spacing on the 4pt scale only. A value outside it is a VIOLATION, not an extension:
  flag it and propose the nearest step.
- Naming: jcd_ SYSTEM carries the only padding and width. section_is_ SEMANTIC carries
  identity, never spacing. jcd_ui_ COMPONENT carries internal spacing only. BB Class field
  output is "<semantic class> <system classes>".
- Breakpoints are desktop-first max-width at 1200 / 992 / 768. Never min-width.
- Module vocabulary is PowerPack-first. Base BB is limited to Loop, HTML, Box, Flex
  Columns. UABB is used for five modules only: Advanced Icons, Off-Canvas, Devices, Image
  Carousel, Content Toggle. Advanced Menu is PowerPack.
- WCAG 2.1 AA is a hard gate. Compute every contrast ratio from token values and state the
  number. Body text >= 4.5:1, large text and UI >= 3:1.
- Every interactive element needs a :focus-visible state visually distinct from :hover.
- Every option carries uxRationale (why it works, tied to a named heuristic or law) and
  deviceAdaptability (benefit-framed, for the client).
- Exactly ONE option per set is marked recommended: true, with the reasoning attached.
- No lorem ipsum. Placeholder copy follows StoryBrand SB7 in the client's voice.

Navigation generator

Generate 3 navigation options for the Navigation Library.

INPUT: the client's sitemap and primary CTA. Options vary in LAYOUT and INTERACTION, not
in colour — all three render live in the approved palette and typography. The client never
evaluates a layout in placeholder branding.

Vary meaningfully. Three variants of a centred logo are one option, not three:
  - a conventional left-logo bar with inline nav
  - a centred masthead, optionally double-deck with a compact scroll state
  - a minimal bar with an off-canvas panel carrying the full menu

Each option specifies:
  - desktop layout and the full responsive behaviour at 1200 / 992 / 768
  - sticky behaviour, and if the header changes state on scroll, HOW. Beaver Themer's
    Shrink setting generates the scroll state class; Sticky alone keeps the header at its
    original size with no class change. A state-swapping header needs Shrink ON, or Sticky
    OFF plus a scroll listener.
  - animate transform and opacity, never height. max-height on a fixed header triggers
    layout every frame and degrades on long pages.
  - the mobile menu: UABB Off-Canvas, ONE panel with multiple triggers sharing a Custom
    Class — never a second Off-Canvas module, which duplicates the panel markup and JS.
  - the primary CTA, using the exact approved label, identical in every position
  - 5-7 items maximum (Hick's Law). If the sitemap exceeds that, propose the grouping.
  - keyboard behaviour: tab order, focus trap in the panel, Esc to close, focus restored to
    the trigger. Any element hidden off-screen must leave the tab order — visibility:
    hidden, not just transform.
  - aria-expanded on the trigger, synced to the PANEL's state rather than the click, so
    closing via the X, the overlay, or Esc all stay accurate.

Note: UABB Advanced Icons renders no interactive element by default — plain divs and spans
with an aria-hidden <i>. If a trigger uses it, specify the Link field so it renders an
anchor, and supply a real aria-label. Font Awesome renders glyphs through ::before and BB
sets colour on both the <i> and its ::before, so icon colour rules must target both.

Placeholder — replace on remixRecommended

Conventional left-logo bar, five inline items, one CTA. Sticky with Themer Shrink ON, so the compact scroll state has a class to hook. Mobile menu is a single UABB Off-Canvas panel.

BB Class field: section_is_masthead jcd_band_sm jcd_width_default

Specification

Desktop (1201px+): Logo left · 5 items right · CTA far right
xl (<=1200): Item gap steps 32 -> 24; CTA unchanged
lg (<=992): Inline nav hidden; Off-Canvas trigger appears
md (<=768): Trigger 44x44 minimum; CTA full-width inside the panel
Nav module: PowerPack Advanced Menu (.pp-) — never UABB
Mobile panel: UABB Off-Canvas (.uabb-) — ONE panel, triggers share a Custom Class
Sticky: Themer Sticky ON + Shrink ON (Shrink generates the scroll state class)
Row padding: Leave BB Row Padding at Global Settings default

Why it works

Five items sits inside Hick's Law, so the choice is made without scanning, and one primary CTA per viewport keeps the conversion path unambiguous. The compact scroll state animates transform and opacity only, so it stays smooth on a long page.

On every device

The menu stays within thumb reach on a phone, opens as a full panel rather than a cramped dropdown, and the same button label appears wherever the visitor decides to act.

Why recommended

The only entry in the set, and the convention Jakob's Law points to: logo top-left linking home, nav top-right, one primary CTA. A generated set replaces it with three genuinely different layouts.

Notes

aria-expanded is synced to the panel's state, not the click, so closing via the X, the overlay or Esc all stay accurate.
The closed panel uses visibility: hidden, not transform alone — an off-screen panel must leave the tab order.
Focus is trapped in the open panel and restored to the trigger on close.
:focus-visible is a 2px offset ring, visually distinct from the hover underline. Icon colour rules target both the <i> and its ::before.

01 · Premium Editorial

Serif brand, off-canvas drawer, category rail.

Dual-row masthead inspired by independent print magazines. Serif wordmark anchors the top row; the bottom rail carries the drawer trigger, a search toggle, and category text links divided by hairlines.

View

Commonwealth.

Issue 42 · The Quiet Season

Culture Design Essays Interviews

UX RationaleJakob's Law: readers of long-form publications expect a masthead + drawer pattern, so cognitive load is near-zero. The high-contrast Subscribe pill honors Fitts's Law as the largest, warmest target.

Device AdaptabilityOn Tablet/Mobile the category rail collapses into the drawer; the Subscribe pill and hamburger stay on the primary sticky bar to preserve conversion targets.

02 · Corporate SaaS / Tech

Single row, hover dropdowns, dual right-side CTAs.

Clean single-row layout with a modern sans wordmark, five-item center nav with dropdown indicators, and paired 'Log in' + 'Start free trial' actions on the right.

View

Northlake

UX RationaleMiller's Law: five primary links stay well inside the 7±2 working-memory cap. Dropdown chevrons signal expandability, satisfying Match Between System and the Real World.

Device AdaptabilityBelow the tablet breakpoint, center links consolidate into a slide-down mobile sheet while the primary CTA remains visible as the largest sticky target.

03 · E-Commerce Powerhouse

Announcement bar, centered search, live cart counts.

Triple-row layout: promo alert, brand + search + utility icons, and a horizontal scrolling category rail. Wishlist and cart display dynamic count indicators.

View

Free shipping on orders over $75 · Ends Sunday

Meridian Co.

New arrivals Women Men Kids Home Sport Beauty Sale Editorial Gift cards

UX RationaleFlexibility & Efficiency of Use: prominent search short-circuits menu navigation for power users, while the category rail supports discovery. Cart counters give constant Visibility of System Status.

Device AdaptabilityOn Mobile the centered search collapses to an icon toggle, the category rail remains horizontally scrollable, and utility icons stay pinned right for thumb reach (Fitts's Law).

04 · Minimalist Creative Agency

Bold wordmark, full-screen overlay, dramatic typography.

High-whitespace boundary layout. A bold wordmark on the left and a single hamburger on the right open an elegant full-screen overlay with large display-type links.

View

KILN&CO

UX RationaleAesthetic & Minimalist Design: two on-screen targets remove decision fatigue. The overlay's oversized links satisfy Fitts's Law with generous hit areas.

Device AdaptabilityThe overlay is intrinsically responsive — link scale reflows across breakpoints — so no structural change is required from Desktop to Mobile beyond type sizing.

05 · App / Product Dashboard

Brand mark, global command search, notifications, avatar menu.

Compact utility header for authenticated app shells. Global search with ⌘K affordance, a notification bell with unread dot, and an avatar dropdown covering profile, team, billing, and sign-out.

View

Atlas

⌘K

UX RationaleFlexibility & Efficiency of Use: the ⌘K shortcut serves power users while the visible search bar supports novices. The avatar dropdown groups account controls in one predictable location.

Device AdaptabilityOn smaller viewports the wordmark hides and the shortcut hint drops; search compresses to a shorter placeholder, but all utility icons remain visible in the primary bar.

06 · Directory / Mega-Menu Portal

Category triggers open a multi-column mega-panel.

Primary row with category text triggers. Hover or focus flies out a structured multi-column panel grouping sub-links with small icon marks, ideal for directories and portals with large IA.

View

Fieldbook

Submit

UX RationaleMiller's Law: chunking dozens of links into 3-column groups of ~3 items keeps each column within working-memory limits. Icon marks reinforce recognition over recall.

Device AdaptabilityOn Tablet/Mobile the mega panel collapses into a stacked accordion inside the drawer — same information architecture, adapted to touch and vertical scrolling.

Navigation options

An entry must satisfy NavigationOption

Navigation generator

Shared constraints

Navigation generator

Left logo, inline nav, one CTA

Specification

Why it works

On every device

Why recommended

Notes