Library

Animated Tabs Navbar

Animated Tabs Navbar

Navbar with animated underline indicator that slides between tabs using layoutId. Supports controlled and uncontrolled modes with logo and right-side content slots.

navbartabsunderlinelayoutId

Installation

bash
# Copy animated-tabs-navbar.tsx to your project
cp components/ui/animated-tabs-navbar.tsx your-project/components/ui/animated-tabs-navbar.tsx

How to use

tsx
import { AnimatedTabsNavbar } from "@/components/ui/animated-tabs-navbar";
tsx
<AnimatedTabsNavbar
  logo={<span className="font-bold text-lg">Brand</span>}
  tabs={[
    { id: "home", label: "Home" },
    { id: "products", label: "Products" },
    { id: "pricing", label: "Pricing" },
    { id: "blog", label: "Blog" },
  ]}
  rightContent={<button className="px-4 py-2 bg-zinc-900 text-white text-sm rounded-lg">Sign in</button>}
/>

Dependencies

framer-motion

Exports

AnimatedTabsNavbar

File

components/ui/animated-tabs-navbar.tsx
Preview

Click the tabs above to see the animated underline

Made with