Navbar Menu
Animated navbar with dropdown menus featuring smooth expand/collapse transitions.
Preview
Navbar Menu
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Main site navigation with mega-menu dropdowns.
Why this component matters
Smooth dropdown transitions prevent jarring layout shifts and give the navigation a polished, premium feel.
Usage guidance
Use for sites with 4-6 top-level categories, each with 3-8 sub-items. Animate dropdown entry with 200ms ease-out. Include hover previews for sub-items.
Installation
bash
npx shadcn@latest add @aceternity/navbar-menuUsage
example.tsxtsx
import { NavbarMenu } from "@/components/ui/navbar-menu";
export default function Example() {
return (
<NavbarMenu>
{/* Your content here */}
</NavbarMenu>
);
}Source
navbar-menu.tsx
components/ui/navbar-menu.tsx