ns-ui
A full-width site nav that condenses in place as the page scrolls — roomy padding, full-size wordmark and links at the top, tightening to a dense pinned rail — over a distance measured from the bar's own rendered height at each extreme, not a guessed scroll-pixel constant.
Use when Pick nav-condense-rail for a top-of-site bar whose transition is a density change — the same full-width silhouette from roomy to a tight pinned rail, with the condense distance measured from the bar's own rendered height at each extreme (two off-screen probes, ResizeObserver) rather than an arbitrary scroll-pixel constant. Pick header-scroll-pill instead when the destination shape itself should change — full bar collapsing into a small centered floating pill with a rolling active-section label — which is a silhouette morph, not a density change, and already owns scroll-linked active-section tracking with hysteresis and a fast-scroll-up overshoot.
Install
npx shadcn add https://design.helpmarq.comns-ui / nav-condense-rail
The distance this bar takes to go from roomy to dense is read off its own rendered height at each extreme — shrink the wordmark, change the font, resize the window, and the transition still ends exactly where the bar itself stops shrinking.
Case studies, shipped product, the occasional postmortem. Scroll to watch the bar above tighten from roomy to a dense pinned rail — the transition length is measured from its own height, not a guessed pixel value.
Discovery, prototyping, build, handoff. Four sections, no filler beyond what makes the page tall enough to scroll through the condense.
Flat project rate, no retainer required. Scroll back up and the bar reopens to its roomy resting state at exactly the same measured distance.
One inbox, no ticket system. Reply time is measured in hours, not days.
| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark? | string | — | — |
| links? | NavCondenseRailLink[] | — | — |
| cta? | NavCondenseRailLink | — | — |
| className? | string | — | — |