Resizable Navbar
NewNavbar that resizes dynamically based on scroll position, shrinking as the user scrolls down.
Preview
Resizable Navbar
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Primary site navigation with adaptive sizing.
Why this component matters
Adaptive sizing gives more content space as users engage deeper into the page while keeping navigation accessible.
Usage guidance
Use as the primary navbar for content-rich sites. Set the collapsed height to 48-56px and expanded to 64-72px. Include frosted glass backdrop.
Installation
bash
npx shadcn@latest add @aceternity/resizable-navbarUsage
example.tsxtsx
import { ResizableNavbar } from "@/components/ui/resizable-navbar";
export default function Example() {
return (
<ResizableNavbar>
{/* Your content here */}
</ResizableNavbar>
);
}Source
resizable-navbar.tsx
components/ui/resizable-navbar.tsx