Four site headers — a glass pill that springs wider on scroll, a full-width mega menu with sliding panels, a morphing preview dropdown and a minimal header with a side sheet — each with a working mobile menu.
Pill
pill.tsxFloating glass pill that springs wider once you scroll, revealing a CTA and a reading-progress line; links share a gliding hover highlight.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Relay" | Product name; its first letter becomes the mark. |
links | { label: string; href: string }[] | — | Primary links shown in the pill and the mobile menu. |
activeHref | string | — | Href of the current page; gets aria-current and a volt dot. |
cta | { label: string; href: string } | — | Call to action revealed when the pill expands. |
secondary | { label: string; href: string } | — | Quiet link such as Sign in. |
threshold | number | 40 | Pixels scrolled before the pill expands. |
scrollContainer | RefObject<HTMLElement | null> | — | Watch this element's scroll instead of the window. |
className | string | — | Classes for the sticky header wrapper. |
Morphing
morphing.tsxCentered nav whose single preview panel morphs its width, height and position between items while each item's feature preview crossfades in.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Halcyon" | Product name beside the mark. |
items | NavbarMorphingItem[] | — | { id, label, title, body, preview: "canvas" | "agent" | "chart" | "security", width, links }. width sets the panel size in px. |
cta | { label: string; href: string } | — | Button on the right. |
className | string | — | Classes for the header. |
Simple
simple.tsxMinimal header with a sliding volt underline on links and a focus-trapped side sheet on small containers.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Tidepool" | Product name beside the wave mark. |
links | { label: string; href: string }[] | — | Primary links. |
activeHref | string | — | Href of the current page; the underline rests here. |
cta | { label: string; href: string } | — | Primary button. |
secondary | { label: string; href: string } | — | Quiet link such as Log in. |
sheetNote | string | — | Line at the bottom of the mobile sheet. |
sheetStrategy | "fixed" | "absolute" | "fixed" | fixed covers the viewport; absolute stays inside the nearest positioned ancestor. |
className | string | — | Classes for the header. |
Install the whole set
Installs every navbar variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Button
Accessibility
- Menu triggers are real buttons with aria-expanded and aria-controls; Escape closes any open panel or menu and returns focus to its trigger.
- Arrow Down on a desktop trigger opens its panel and moves focus to the first link; outside clicks close panels.
- The mobile sheet is a modal dialog that traps Tab, and every spring falls back to a fade under reduced motion.