Gooey Nav

Pro

A nav whose active marker is a liquid blob that stretches to the next item and splashes.

Viewing Projects. Use the arrow keys to move between links.

Customize

Particles12

Palette

Installation

Gooey Nav is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy gooey-nav.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { GooeyNav } from "@/components/ui/gooey-nav";

<GooeyNav
  activeHref={pathname}
  items={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Team", href: "/team" },
  ]}
  onNavigate={(href) => router.push(href)}
/>

Props

9 properties

Property	Type	Default	Description
items	{ label, href }[]	—	Links in order.
activeHref	string	—	Current page, for controlled use.
defaultActiveHref	string	—	Current page when uncontrolled. Defaults to the first item.
onNavigate	(href, event) => void	—	Called on a plain left click with the default navigation prevented.
colors	string[]	["#ff784f", "#ffa585", "#ffc24a"]	The first fills the blob; all of them color the particles.
activeTextColor	string	"#070606"	Text color on the blob.
particleCount	number	12	Particles in the splash. 0 turns it off; reduced motion always does.
label	string	"Main"	Accessible name of the nav.
className	string	—	Extra classes for the nav.

Dependencies: motion