Marketing

SiteHeader & SiteFooter

The marketing navbar and footer: a different job from app chrome, and a different set of mistakes to avoid.

SiteHeader SiteFooter

import { SiteHeader, SiteFooter } from '@anomalia/ui';

Notes

A landing header is not an AppBar. It holds a wordmark, a few links, some utilities and a CTA at desktop width, and collapses the middle on a phone — but never the CTA, which is the reason the page exists.
The mobile menu is a real <dialog> opened with showModal. Escape, focus containment and the top layer come from the platform instead of from a div with a high z-index and a keydown handler.
The bar frosts once the page has scrolled, not before. Glass over the top of an unscrolled page is an effect applied to nothing.
Footer columns are real sections with real headings, which is what lets assistive tech skip a column instead of walking forty links.
Footer links are --an-text-muted, never fainter. A footer is the most-linked region on a marketing site, and small type is exactly where contrast has least room to spare.
The oversized wordmark is aria-hidden: it is a graphic, and the site was already named at the top of the page.

Examples

Header

The bar frosts only once the page has scrolled, the links collapse into a real `<dialog>` on a phone, and the CTA never collapses — it is the reason the page exists.

Resize the preview

Under 860px the links and utilities move into the menu. The CTA stays.

Footer

Columns are real sections with real headings, so a screen reader can skip one instead of walking forty links. Links stay at `--an-text-muted`: a footer is the most-linked region on a marketing site and small type has the least contrast to spare.

API

SiteHeader

Prop	Type	Default	Description
`links`	`SiteLink[]`	—	`{ label, href, external? }`.
`current`	`string`	—	Matched against each href to set `aria-current`.
`glass / sticky`	`boolean`	`true`	Frost on scroll, and pin to the top.
`brand / utilities / cta`	`Snippet`	—	Wordmark, theme and language controls, and the CTA that never collapses.

SiteFooter

Prop	Type	Default	Description
`columns`	`{ title, links }[]`	—	The link directory. Data, because that is what it is.
`wordmark`	`string \| null`	—	Oversized brand across the bottom. Decorative by definition.
`cta / brand / social / legal`	`Snippet`	—	Closing CTA band, the brand block, icons, and the last row.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.