A header turned on its side: a sticky left rail with rotated, numbered links, a glowing marker that slides to the current page and a round call to action. Under 640px it becomes a top bar with a clip-path menu of large numbered links.
npx shadcn@latest add https://hyperblur.dev/r/navbar-vertical-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-vertical-rail.tsx.
import { NavbarVerticalRail } from "@/components/hyperblur/navbar-vertical-rail"
<NavbarVerticalRail showBackdrop={false}>{page}</NavbarVerticalRail>| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Nº" | Short mark shown in the logo tile. Two or three characters read best. |
| links | { label: string; href: string }[] | Work, Studio, Index, Notes, Contact | Links in the rail. Short labels fit the vertical layout best. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| cta | { label: string; href: string } | null | { label: "Start a project", href: "#contact" } | Round arrow button at the bottom of the rail and wide button in the mobile menu. |
| status | string | null | "Booking Q1" | Availability text announced next to a pulsing dot. Pass null to hide it. |
| menuOpen | boolean | Controlled state of the mobile menu. | |
| defaultMenuOpen | boolean | false | Start with the mobile menu open. |
| onMenuOpenChange | (open: boolean) => void | Called when the mobile menu opens or closes. | |
| accent | string | "#d4ff3f" | Color of the logo tile, the marker, the numbers and the call to action fill. |
| children | ReactNode | Page content rendered to the right of the rail. Replaces the sample page. | |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |