Interactive

Gooey Nav

A nav row where the active pill flows to the chosen item through a goo filter, shedding droplets that melt back in.
import { GooeyNav } from "pleate/effects/gooey-nav";

Five items

Props

items

Links or buttons.

{ label, href? }[]

value / defaultValue

Active index.

numberdefault 0

onChange

Called on select.

(index) => void

particleCount

Droplets per change.

numberdefault 12

color

Pill color.

stringdefault accent

Accessibility

  • A nav landmark; the active item has aria-current="page".
  • Left and right arrows move focus between items.
  • Reduced motion moves the pill without droplets.