Pro

Goo nav

A bar of destinations where the chosen one breaks away from the rest. The items sit on ink blobs under a goo filter, so neighbours read as one bar and a liquid neck stretches and snaps as the chosen blob pulls a gap open around itself.

Pro

pnpm dlx shadcn@latest add @caliper/goo-nav

Forma

Choose a section; the chosen one breaks away.

Showing overview.

Installs components/ui/goo-nav.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

A handful of top-level sections on a marketing site or a product's hero area.
Places where the navigation is part of the look.

Skip it when

Dense product navigation; use tabs or the sidebar.
More items than fit on one line on a phone; it scrolls, but a menu reads better.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Plain links and buttons: Items are links with aria-current, or buttons when there is no route; forced colours drop the blobs for a border.

Styling

Sharp type: Only the blobs are filtered; the labels are a second row above them, so text never blurs.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/goo-nav

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { GooNav } from "@/components/ui/goo-nav"

The worked example comes with Pro

The 36-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

GooNav

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

items *readonly GooNavItem[]—

value *string—

onValueChange((id: string) => void)—

label *string—The navigation's name: "Sections".

linkElementType"a"Your router's link for items with an href.

It is built on native elements and keeps aria-label and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.