Resizable Header
A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.
northwind.com
Ship faster with Northwind
Scroll this panel — the navigation springs into a compact, blurred pill and the active link indicator follows along.
Analytics
Automations
Integrations
Security
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/resizable-header.json"Usage
tsx
import { ResizableHeader } from "@/components/godui/resizable-header";tsx
const links = [
{ label: "Product", href: "/product" },
{ label: "Pricing", href: "/pricing" },
{ label: "Docs", href: "/docs" },
];
<ResizableHeader links={links} activeHref={pathname} onNavigate={router.push} />;By default the header tracks window scroll. To track a scroll container instead
(as in the preview above), pass a scrollRef:
tsx
const scrollRef = useRef(null);
<div ref={scrollRef} className="overflow-y-auto">
<ResizableHeader scrollRef={scrollRef} links={links} />
{/* content */}
</div>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | "GodUI" | Brand mark on the left |
links | HeaderLink[] | [] | Navigation links: { label, href } |
activeHref | string | — | href of the active link |
cta | ReactNode | — | Call-to-action node on the right |
scrollThreshold | number | 24 | Scroll px before the bar morphs to a pill |
sticky | boolean | true | Stick the header to the top |
scrollRef | RefObject<HTMLElement> | — | Scroll container to track (defaults to window) |
onNavigate | (href: string) => void | — | Called on link click (prevents default) |