Three floating capsules for the brand, the links and the actions that glide together into one pill once the page scrolls. On small screens the pill itself grows into the menu, with staggered links and two full-width buttons.
npx shadcn@latest add https://hyperblur.dev/r/navbar-floating-capsule.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-floating-capsule.tsx.
import { NavbarFloatingCapsule } from "@/components/hyperblur/navbar-floating-capsule"
<NavbarFloatingCapsule brand="Halftone" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Halftone" | Product name next to the logo mark. |
| links | { label: string; href: string }[] | Product, Changelog, Customers, Pricing, Docs | Links in the center capsule and in the mobile menu. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link when uncontrolled. It gets a glowing dot. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| signIn | { label: string; href: string } | null | { label: "Sign in", href: "#signin" } | Quiet link in the right capsule. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Get started", href: "#start" } | White pill button with a rotating arrow. Pass null to hide it. |
| merged | boolean | Force the merged pill on or off. Overrides mergeOnScroll. | |
| mergeOnScroll | boolean | true | Merge the capsules once the window scrolls past threshold. |
| threshold | number | 40 | Scroll distance in pixels that triggers the merge. |
| menuOpen | boolean | Controlled state of the mobile menu. Pair with onMenuOpenChange. | |
| defaultMenuOpen | boolean | false | Start with the mobile menu open. |
| onMenuOpenChange | (open: boolean) => void | Called when the mobile menu opens or closes. Escape closes it. | |
| accent | string | "#f59e0b" | Color of the logo mark, the active dot, the backdrop glow and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |