Browse components
Navbar Flow
A full-width navbar that flows into a floating glass pill as you scroll, with a sliding hover highlight, scroll progress line and an animated mobile menu.
Installation
npx shadcn@latest add @glint-ui/navbar-flowFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/navbar-flow.json
Usage
import { NavbarFlow } from "@/components/ui/navbar-flow";
<NavbarFlow
brand={<Logo />}
links={[{ label: "Product", href: "#product" }, { label: "Pricing", href: "#pricing" }]}
action={<a href="/signup">Get started</a>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| links | ReactNode | — | Array of { label, href }. |
| brand | ReactNode | — | Logo or wordmark on the left. |
| action | ReactNode | — | Call to action on the right. |
| scrollContainerRef | ReactNode | — | Ref to a scrolling ancestor. Defaults to the window. |
| threshold | number | 40 | Px scrolled before the bar becomes a pill. |
| pillWidth | number | 720 | Max width of the floating pill, in px. |
| position | "sticky" | "fixed" | "absolute" | "sticky" | How the header is positioned. |
| progress | boolean | true | Scroll-progress line along the pill. |
| accent | string | "#a3e635" | Progress line and active-link dot color. |
| className | string | — | Extra classes for the root element. |