nav accepted

MastheadNav

Orient and move without stealing the opening.

Structural distinction

Sticky masthead that condenses once the page starts (space returned, hairline arrives). Narrow containers fold links into a Radix Dialog drawer. Publishes --gmo-nav-offset so sticky siblings (manifesto frame, FAQ masthead) yield instead of colliding.

Use when

Any full-page composition; required before pages read as real sites.

Avoid when

Single-section previews; deep app chrome (this is marketing framing, not an app shell).

Accessibility

header landmark + labelled nav. Drawer via Radix Dialog (title/description for SR, focus trap, restoration). Menu button visible only when links are folded.

scroll

Condenses past 24px of scroll: padding tightens, hairline arrives. Functional space recovery, no shrinking logos.

hover

Links warm to full ink with an arriving hairline; brand warms to accent.

press

Menu opens the drawer (slide + scrim on motion tokens); CTA presses like every Action.

focus

Landmark nav in natural order; drawer is a real dialog: focus trapped, Esc closes, focus restored.

reduced

Condensation applies instantly; drawer appears without travel.

Usage

import { MastheadNav } from "@guillermo/marketing";

<MastheadNav
  content={{
    brand: { name: "Brand", href: "/" },
    links: [{ label: "Method", href: "#method" }],
    action: { label: "Act", href: "#cta" },
  }}
/>