Pill Navbar

Rounded pill-shaped navbar with animated active indicator sliding between items. Supports a primary CTA button variant for the last item.

navbarpillroundedminimal

Installation

bash

# Copy pill-navbar.tsx to your project
cp components/ui/pill-navbar.tsx your-project/components/ui/pill-navbar.tsx

How to use

tsx

import { PillNavbar } from "@/components/ui/pill-navbar";

tsx

<PillNavbar
  items={[
    { label: "Home" },
    { label: "About" },
    { label: "Contact" },
    { label: "Login", variant: "primary" },
  ]}
  defaultActive="Home"
/>

Dependencies

framer-motion

Exports

PillNavbar

File

components/ui/pill-navbar.tsx

Preview

Click to switch active tab

Minimal variant