A light header with a dismissible announcement strip, the logo on the left, centered links with a drawing underline, log in and a call to action on the right, and a hairline that fills as the page scrolls.
npx shadcn@latest add https://hyperblur.dev/r/nav-announce-split.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-announce-split.tsx.
import { NavAnnounceSplit } from "@/components/hyperblur/nav-announce-split"
<NavAnnounceSplit activeIndex={-1} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Ledger" | Product name next to the logo mark. |
| announcement | { tag?: string; text: string; link?: { label: string; href: string } } | null | Ledger 2.0 launch note | Content of the top strip. Pass null to hide it. |
| onDismiss | () => void | Called when the announcement is dismissed. | |
| links | { label: string; href: string }[] | Product, Customers, Pricing, Journal, Company | Center links. Below 820px they move into a menu sheet. |
| activeIndex | number | 3 | Index of the current link, underlined in the accent color. Use -1 for none. |
| login | { label: string; href: string } | null | { label: "Log in", href: "#" } | Text link on the right. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Get started", href: "#" } | Dark pill button with an arrow badge. Pass null to hide it. |
| progress | number | Controlled progress from 0 to 1 for the bottom bar. When omitted the bar follows window scroll. | |
| trackScroll | boolean | true | Follow window scroll when progress is not set. |
| accent | string | "#e8590c" | Color of the tag, the active underline, the arrow badge and the progress bar. |
| showBackdrop | boolean | true | Render a faded article fragment under the bar for previews. Turn it off in a real layout. |