Pill Nav

Free

A pill navbar where the active pill slides between links and a softer pill previews where you point.

Selected work

Twelve products we shipped with small, stubborn teams.

Customize

Layout

Pill#ff784f

Align

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/pill-nav.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/pill-nav.tsx.

Usage

import Link from "next/link";
import { usePathname } from "next/navigation";
import { PillNav } from "@/components/ui/pill-nav";

export function SiteNav() {
  const pathname = usePathname();
  return (
    <PillNav
      logo="H"
      activeHref={pathname}
      items={[
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Contact", href: "/contact" },
      ]}
      renderLink={(props) => <Link {...props} />}
    />
  );
}

Props

13 properties

Property	Type	Default	Description
items	{ label, href }[]	—	Links in order.
activeHref	string	—	Current page, for controlled use. Pass your router's pathname.
defaultActiveHref	string	—	Current page when uncontrolled. Defaults to the first item.
logo	ReactNode	—	Mark shown in a circle at the start of the bar.
logoLabel	string	"Home"	Accessible name of the logo link.
logoHref	string	"/"	Where the logo links to.
colors	{ bar?, pill?, pillText?, text?, hover? }	—	Bar, active pill, pill text, link text and hover pill colors.
onNavigate	(href, event) => void	—	Called on a plain left click with the default navigation prevented, so any router can take over.
renderLink	(props, item) => ReactNode	—	Render each link with your router's component; spread props on it.
collapse	"auto" \| "always" \| "never"	"auto"	auto folds into a menu button when the nav is narrower than 36rem (a container query).
align	"start" \| "center" \| "end"	"center"	Horizontal placement of the bar.
label	string	"Main"	Accessible name of the nav.
className	string	—	Extra classes for the nav.

Dependencies: motion

Usage

import Link from "next/link";
import { usePathname } from "next/navigation";
import { PillNav } from "@/components/ui/pill-nav";

export function SiteNav() {
  const pathname = usePathname();
  return (
    <PillNav
      logo="H"
      activeHref={pathname}
      items={[
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Contact", href: "/contact" },
      ]}
      renderLink={(props) => <Link {...props} />}
    />
  );
}

Property

Type

Default

Description

items

{ label, href }[]

—

Links in order.

activeHref

string

—

Current page, for controlled use. Pass your router's pathname.

defaultActiveHref

string

—

Current page when uncontrolled. Defaults to the first item.

logo

ReactNode

—

Mark shown in a circle at the start of the bar.

logoLabel

string

"Home"

Accessible name of the logo link.

logoHref

string

"/"

Where the logo links to.

colors

{ bar?, pill?, pillText?, text?, hover? }

—

Bar, active pill, pill text, link text and hover pill colors.

onNavigate

(href, event) => void

—

Called on a plain left click with the default navigation prevented, so any router can take over.

renderLink

(props, item) => ReactNode

—

Render each link with your router's component; spread props on it.

collapse

"auto" | "always" | "never"

"auto"

auto folds into a menu button when the nav is narrower than 36rem (a container query).

align

"start" | "center" | "end"

"center"

Horizontal placement of the bar.

label

string

"Main"

Accessible name of the nav.

className

string

—

Extra classes for the nav.