Loading…

Gooey Nav

beta

A segmented nav bar whose selected item lifts out of the group as its own tile while the rest close back into one piece, all on one spring.

Navigation
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add gooey-nav

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Sizes
With Icons
Links
Custom Colours
Loose
Controlled
Overflow
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<GooeyNav>

Prop	Type	Default
`items` (required) The items. A string is a button, `href` makes a link, `icon` renders before the label.	`GooeyNavItem[]`	—
`activeClassName` Classes for the selected tile.	`string`	`"bg-primary text-primary-foreground"`
`defaultValue` Index selected at first, when uncontrolled.	`number`	`0`
`itemClassName` Classes for every tile, before `activeClassName`.	`string`	—
`onValueChange` Called with the index of a newly selected item.	`(index: number) => void`	—
`radius` Radius in px of the bar's ends and of every open gap. Defaults by size: 8, 10, 12, 14.	`number`	—
`separation` Gap in px that opens on each side of the selected item. Defaults by size: 14, 16, 20, 24.	`number`	—
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`
`value` Index of the selected item, when controlled.	`number`	—

Plus every attribute of <nav> except defaultValue.

Accessibility

A <nav> (name it with aria-label) containing a real list. Items are links (aria-current="page" when selected) or buttons (aria-current="true"), all in the Tab order; ArrowLeft/ArrowRight follow the reading direction and wrap, and Home/End jump to the ends. Disabled items are disabled buttons, or links with aria-disabled that ignore activation. Icons are aria-hidden, so an icon-only item needs a text label (visually hidden if you like). The selected tile differs by its separation and shape as well as colour, so colour is never the only signal; check the contrast of any activeClassName you pass. The bar never wraps and scrolls horizontally when it outgrows its container. The spring runs through motion inside MotionConfig reducedMotion="user" and jumps under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

items

The items. A string is a button, href makes a link, icon renders before the label.

GooeyNavItem[]

—

activeClassName

Classes for the selected tile.

string

"bg-primary text-primary-foreground"

defaultValue

Index selected at first, when uncontrolled.

number

0

itemClassName

Classes for every tile, before activeClassName.

string

—

onValueChange

Called with the index of a newly selected item.

(index: number) => void

—

radius

Radius in px of the bar's ends and of every open gap. Defaults by size: 8, 10, 12, 14.

number

—

separation

Gap in px that opens on each side of the selected item. Defaults by size: 14, 16, 20, 24.

number

—

size

"xs" | "sm" | "md" | "lg"

"md"

value

Index of the selected item, when controlled.

number

—