KB-204 · NAV/GLASS/RAIL
Glass Rail Navbar
A glass rail that condenses as the page gets underway: tall and transparent at rest, tighter with a blur and a hairline once content scrolls under it. Desktop links share one slipstream pill that chases hover and focus; the mobile fold glides open below the rail.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/nav-glass-rail
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / links / activeHref | ReactNode · RailLink[] · string | — | Identity, the link set, and the current page. |
| cta / onCta | string · () => void | — | The rail's one action; repeated inside the mobile fold. |