An editorial masthead with a utility row, a large centered wordmark and a sections row that folds into a floating compact bar on scroll. The wordmark glides to the left, the sections rise into the same row and a ring around search tracks reading progress.
npx shadcn@latest add https://hyperblur.dev/r/navbar-scroll-shrink.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-scroll-shrink.tsx.
import { NavbarScrollShrink } from "@/components/hyperblur/navbar-scroll-shrink"
<NavbarScrollShrink brand="Northbound" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northbound" | Wordmark in the center of the masthead. |
| edition | string | "Issue 48 · The winter field guide" | Text in the utility row. |
| links | { label: string; href: string }[] | Field guides, Gear, Routes, Essays, Photo | Section links. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| utility | { label: string; href: string }[] | Shop prints, Newsletter, Log in | Small links in the utility row and the mobile sheet. |
| cta | { label: string; href: string } | null | { label: "Subscribe", href: "#" } | Pill button on the right. Pass null to hide it. |
| compact | boolean | Force the compact bar on or off. When unset, it follows window scroll. | |
| onCompactChange | (compact: boolean) => void | Called when scrolling crosses the threshold. | |
| threshold | number | 80 | Scroll distance in pixels that switches to the compact bar. It expands again below half of it. |
| progress | number | Fixed reading progress from 0 to 1. When unset, it follows window scroll. | |
| sticky | boolean | true | Stick the masthead to the top of the viewport. Ignored while showBackdrop is on. |
| accent | string | "#d4ff3f" | Color of the wordmark dot, the active section, the progress ring and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |