Navbars
Navigation bar patterns with animation, dropdowns, and adaptive behavior.
Floating Nav
Block preview — compose from component imports
Floating Nav
Scroll-aware floating navbar that appears/disappears based on scroll direction.
Use for marketing pages with linear content flow. Reclaims vertical space while maintaining accessibility.
// Install the components used in this block
npx shadcn@latest add @aceternity/floating-navbarResizable Nav
Block preview — compose from component imports
Resizable Nav
Navbar that shrinks on scroll with frosted glass backdrop and logo transformation.
The adaptive sizing gives more content space as users engage deeper. Include frosted glass for depth.
// Install the components used in this block
npx shadcn@latest add @aceternity/resizable-navbarMega Menu Nav
Block preview — compose from component imports
Mega Menu Nav
Full navbar with animated dropdown menus and content previews.
Use for sites with 4-6 categories and rich sub-navigation. The animated dropdowns feel polished and premium.
// Install the components used in this block
npx shadcn@latest add @aceternity/navbar-menu