Navbar Pill
The navigation links sit inside a rounded pill container with a semi-transparent background and backdrop blur. Clicking a link updates the active state, which applies a solid black (or white in dark mode) background to that item.
Active state is managed with useState. The clicked item gets contrasting text color and a solid background, while other items remain transparent with hover states. Transitions are smooth with whileHover and whileTap effects.
The logo sits on the left, the pill navigation centers, and a CTA button positions on the right. The layout uses flexbox with gap spacing for consistent alignment.
The mobile version shows a hamburger menu with vertical link layout. Works well for dashboards, admin panels, app interfaces, or any site with a limited number of primary navigation items.
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



