Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Animated Underline Navbar Block

A navigation bar with animated sliding underline effect built with React, Next.js, shadcn/ui, and Tailwind CSS. Features framer-motion layoutId for smooth underline transitions that slide between hovered and active items with rounded 2px caps.

Make every navigation interaction feel intentional with this animated underline navbar. The 2px underline slides smoothly from one link to the next using framer-motion layoutId, creating an elegant micro-interaction that guides the eye. The active link retains the underline when nothing is hovered, so users always know where they are. Perfect for marketing sites, portfolios, and documentation portals.

Animated Underline Navbar Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 24, 2026

Was this page helpful?

Sign in to leave feedback.