LayoutStable

Navigation

Sourcecomponents/Navigation.astro

Over hero

The site's fixed top bar — logo, primary links and a Button CTA. In over-hero mode it sits white over the dark hero and flips to the solid look on scroll. Scroll the preview to see the flip.

Switch viewport — the nav renders at each breakpoint's true size, scaled to fit. Scroll inside to see over-hero → solid.

Over hero → solid on scroll

Solid

navMode="solid" — dark on a light page from the start, for inner pages (Work, Studio, etc.).

Solid

Sparklin variant

Same component, product-landing props — the Sparklin logo, a single Login link and a Get started CTA. Nothing bespoke: just logoLight/logoDark, a one-item links, and the CTA overrides.

Sparklin — Login + Get started

Behaviour

Fixed to the top; over-hero flips to solid once you scroll past the hero (an IntersectionObserver on #hero).
Mobile (≤680px) — the links collapse into a burger that opens a full-screen overlay menu; the inline CTA hides.
External links get the up-right arrow; the CTA is always a Button.

Props

Prop	Type	Default	Notes
`navMode`	'over-hero' \| 'solid'	`'over-hero'`	White over the hero (flips to solid on scroll), or dark on a light page from the start.
`links`	{ label, href, external? }[]	`shared nav`	Primary links. Pass [] to hide them (e.g. an app page).
`ctaLabel`	string	`'Work with us'`	CTA button label.
`ctaHref`	string	`'/work-with-us'`	CTA destination.
`logoLight`	string	`'/img/logo.svg'`	Logo shown over the dark hero.
`logoDark`	string	`'/img/logo-dark.svg'`	Logo shown on the solid / scrolled nav.
`logoHref`	string	`'/'`	Where the logo links.
`logoWidth`	string	`'215px'`	Rendered logo width (height is 40px).

Usage

Threaded through the page Base layout via navMode — over-hero on the home page, solid everywhere else.

<!-- Home / landing (over the hero) -->
<Navigation navMode="over-hero" />

<!-- Inner page (Work, Studio…) -->
<Navigation navMode="solid" />

<!-- Sparklin landing — own logo, Login + Get started -->
<Navigation
  logoLight="/images/sparklin/sparklin-logo-white.svg"
  logoDark="/images/sparklin/sparklin-logo.svg"
  logoWidth="137px"
  links={[{ label: 'Login', href: '/login' }]}
  ctaLabel="Get started" ctaHref="#start"
/>

Rules

Use over-hero only where there's a dark hero behind it; solid everywhere else.

Keep primary links to five or fewer.

Don't

Use over-hero on a light page — the white nav vanishes.

Add a second CTA — one button, one job.