Browse components
Gooey Nav
A segmented tray where the active item pulls out on a liquid metaball thread and drops a bead when it snaps.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/gooey-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/gooey-nav.json
Usage
import { GooeyNav } from "@/components/ui/gooey-nav";
<GooeyNav items={["Home", "Components", "Templates", "Docs"]} variant="calamansi" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | — | Labels, or `{ label, href, icon }` objects. Items with `href` render as links. |
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Palette the active pill wears. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Label size, with it the corner and the travel. |
| separation | number | — | Gap the pill opens on each side, in px (defaults per size). |
| threshold | number | 19 | Alpha ramp slope: how hard the fused edge is. |
| gooey | boolean | true | Run the metaball fuse. Off, the surfaces just slide apart. |
| bead | boolean | true | Leave a drop of juice where the thread severs. |
| value | number | — | Active index (controlled). |
| defaultValue | number | 0 | Active index on mount when uncontrolled. |
| onChange | ReactNode | — | `(index) => void`, fired on selection. |
| radius | number | — | Override the corner radius in px. |
| viscosity | number | — | Fuse blur in px. Defaults to 0.55 of the gap. |
| className | string | — | Extra classes for the root element. |