DocsnavigationGooey nav

Gooey nav

A Calamansi nav whose active item pulls out of the tray on a real liquid thread, and merges back when you pick another.

Palette
Calamansi

Tap a tab to slide the goo

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/gooey-nav

How to use

demo.tsx
import { GooeyNav } from "@/components/ui/gooey-nav"
export function Demo() {
  return (
    <GooeyNav
      items={[
        { label: "Home", href: "/" },
        { label: "Docs", href: "/components/introduction" },
        { label: "Pricing", href: "/pricing" },
      ]}
    />
  )
}

Props

Options you can pass to customize this component.

  • itemsoptional
    GooeyNavItem[]

    Labels, or `{ label, href, icon }` objects. An item with an href renders as a link and takes `aria-current`, one without is a button.

  • valueoptional
    number

    Active index, for controlled use. Leave it off and the nav keeps its own, seeded from the route when an item's href matches the current path.

  • defaultValueoptional
    number

    Active index on mount when uncontrolled.

  • onChangeoptional
    (index: number) => void

    Fired with the new index on selection.

  • variantoptional
    whitecalamansislatecitrus

    Palette the active pill is painted in, and with it the drop at each of its own seams. Flat shades of the family's mid stop rather than its gradients, because the liquid has to meet the pill edge to edge.

  • sizeoptional
    xssmmdlg

    Label size, and with it the corner radius and how far the pill travels.

  • separationoptional
    number

    Override the gap the pill opens up on each side, in pixels.

  • radiusoptional
    number

    Override the brand corner radius in pixels. Defaults to the kit's share of the bar's height — about two fifths, which is the 28px corner on a 64px pill — so the turn reads the same at every size.

  • viscosityoptional
    number

    The SVG blur behind the fuse, in pixels, and so how far a thread reaches: the bridge survives to about 1.234 of this before it severs. Defaults to 0.55 of the gap.

  • thresholdoptional
    number

    The alpha ramp's slope — how hard the fused edge is, and how much the thread thins before it parts.

  • gooeyoptional
    boolean

    Run the fuse at all. Off, the surfaces simply pull apart. The filter is skipped under reduced motion either way.

  • beadoptional
    boolean

    Leave a bead behind when the thread severs — the detail that makes the move read as a liquid rather than a slide. The drop wears the material of its own seam: the palette where the pill is one of the two surfaces meeting there, the tray's own colour where neither is.

  • classNameoptional
    string

    Extra classes merged onto the nav.

Dependencies

motionfigma-squirclereact-use-measure

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousDynamic island
NextDuration picker