Navbar Underline
Each nav link has an absolutely positioned span at the bottom that serves as the underline indicator. When a link is active, this span becomes visible with a solid color. Inactive links have transparent underlines.
The underline uses CSS transitions for smooth show/hide. Links also have subtle vertical hover animations with whileHover moving them slightly up. Text color changes on hover from muted to full contrast.
The layout follows a standard structure with logo left, nav center, and CTA right. The header has a card background with rounded corners and border.
The mobile version uses a hamburger menu with vertical link layout. Works well for minimal designs, portfolio sites, or anywhere you want a subtle but clear indication of current location.
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
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



