Navbar With Children
Nav items that have children display a chevron icon. Hovering reveals a dropdown panel using AnimatePresence with perspective transforms. The dropdown animates from above with opacity and rotateX effects.
Dropdowns can contain simple link lists or ProductItem components with images, titles, and descriptions. The Products dropdown uses a two-column grid layout for visual product cards.
Active state is tracked to ensure only one dropdown shows at a time. Leaving the menu area closes all dropdowns. The background uses a blur-md backdrop filter for a glassmorphism effect.
The mobile version shows a hamburger menu that reveals a full list of all items including children. Works well for product sites, documentation, or apps with multiple feature categories to showcase.
Part of Navbars ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



