Components
Header
A sticky glass bar across the top of the page.
Import
import { Header } from '@rinzai/zen';API reference
<Header>
A sticky bar across the top of the page: the page colour, translucent and heavily blurred, over a hairline. Clears the notch on phones, where it's solid instead (a live blur over scrolling content stutters there).
Its first stop for the keyboard is a "Skip to content" link, hidden until focused, that moves focus to the page's <main> past the bar's links (WCAG 2.4.1). Change its text with skipLabel, or pass null to leave it out.
| Prop | Type | Default |
|---|---|---|
skipLabelThe skip link's text; null for no skip link (e.g. when the page has its own). | string | null | — |