Shadcn.io is not affiliated with official shadcn/ui
Navbar Tabs Underline
A tab-style navigation bar with animated underline indicator built with React, Next.js, shadcn/ui, and Tailwind CSS. Clicking a nav item slides a bottom border to the active tab using framer-motion layoutId animation. Active tab uses text-foreground while inactive tabs use text-muted-foreground for clear visual hierarchy.
Turn your navbar into a polished tab bar with a sliding underline indicator. Click any navigation item and watch the bottom border glide smoothly to the active tab using framer-motion layoutId animation. Active tabs render in text-foreground while inactive tabs fade to text-muted-foreground, creating an unmistakable visual hierarchy. Minimal, elegant, and inspired by the simplicity of browser tabs. Perfect for single-page apps, documentation sites, and dashboard navigation.
Related Components
Mega Menu Grid Navbar
Mega menu with clean grid layout dropdowns
Mega Menu Featured Navbar
Mega menu with featured content panel
Minimal Navbar
Ultra-clean single-row navbar
Pill Links Navbar
Navbar with pill-shaped link indicators
Segmented Control Navbar
Navbar with segmented control toggle
Flyout Panel Navbar
Hover-triggered flyout navigation panels
FAQ
Was this page helpful?
Sign in to leave feedback.
Sticky Blur
A sticky navigation bar with backdrop blur effect built with React, Next.js, shadcn/ui, and Tailwind CSS. Features smooth transitions between transparent top state and frosted glass scrolled state with framer-motion animations.
Theme Toggle
A clean navigation bar with dark and light mode toggle built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a sun and moon icon toggle with smooth rotation animation, nav links that change color to demonstrate the theme, and a system auto option in a dropdown using framer-motion transitions.