Floating Navbar

A sticky Navbar that hides on scroll, reveals when scrolled up.

Scroll back up to reveal Navbar

Installation

npx shadcn@latest add @aceternity/floating-navbar

Prop name	Type	Description
`className`	`string`	The class name of the child component.
`navItems`	`{name: string, link: string, icon: ReactNode}`	The navigation items you want to render in the navbar

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Access an ever-growing collection of premium, meticulously crafted templates and Component Blocks.

A product by Aceternity

Building in public at @mannupaaji