Browse components
Pill Nav
Pill navigation whose items flood with a rising circle of color on hover, with a sliding active dot and a compact menu on narrow containers.
Installation
npx shadcn@latest add @glint-ui/pill-navFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pill-nav.json
Usage
import { PillNav } from "@/components/ui/pill-nav";
<PillNav
logo={<span>nº</span>}
items={[
{ label: "Home", href: "/" },
{ label: "Work", href: "/work" },
{ label: "Contact", href: "/contact" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href }. |
| logo | ReactNode | — | Brand mark shown at the left. |
| fillColor | string | "#c6ff3d" | Color of the circle that floods a pill on hover. |
| fillTextColor | string | "#0a0a0a" | Label color on top of the fill. |
| duration | number | 0.5 | Fill duration in seconds. |
| defaultActiveIndex | number | 0 | Initially active item when uncontrolled. |
| activeIndex | ReactNode | — | Controlled active index. |
| onItemClick | ReactNode | — | (item, index) => void |
| className | string | — | Extra classes for the root element. |