Gooey Nav React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import GooeyNav from @/components/ui/gooey-nav.

"use client"

import { House } from "lucide-react"
import { GooeyNav } from "@/components/ui/gooey-nav"

export function Demo() {
  return (
    // hrefs make it track the url on its own, no value needed
    <GooeyNav
      items={[
        { label: "Home", href: "/", icon: <House /> },
        { label: "Changelog", href: "/changelog" },
        { label: "About", href: "/about" },
      ]}
    />
  )
}

// strings render buttons instead, for a segmented control:
// <GooeyNav items={["Day", "Week", "Month"]} onChange={setRange} />

// size is a single value, so step it down yourself on small screens:
// <GooeyNav items={items} size={useIsMobile() ? "xs" : "md"} />

// or dock it under a phone screen like a tab bar:
// <GooeyNav items={items} size="sm" layout="stacked" fullWidth />

Props

• items*
  (string | { label: string; href?: string; icon?: ReactNode })[]

  Nav entries. A string is a button, an object with href is a link, and icon renders before the label.

• sizedefault "md"
  "xs" | "sm" | "md" | "lg"

  Scale of the bar. Sets the label padding, text size and icon size, and picks the matching separation and radius so the shape stays in proportion. Use xs on phones, where it fits a 360px screen.

• layoutdefault "inline"
  "inline" | "stacked"

  Inline puts the icon beside the label. Stacked puts it above, like a phone tab bar, which keeps four items inside a 360px screen at sm.

• fullWidthdefault false
  boolean

  Stretches the bar across its container and shares the width between the items, for a bar docked to the bottom of a screen.

• activeColordefault "#FC4C01"
  string

  Fill of the selected tile. The unselected bar follows barColor.

• activeLabelColordefault "#ffffff"
  string

  Label color of the selected item. Set it when a light activeColor leaves white text unreadable.

• barColordefault ""
  string

  Any CSS color for the unselected tiles and the necks between them. Empty follows the theme: #F4F4F9 light, #262626 dark.

• labelColordefault ""
  string

  Any CSS color for the unselected labels. Empty uses #6E6D7A light, #9B9AA7 dark.

• separationdefault 20
  number

  Gap in pixels that opens on each side of the selected item, which is what pushes the rest of the bar aside. Leave it out to follow the size: 14 (xs), 16 (sm), 20 (md), 24 (lg). A value you pass overrides the size preset.

• radiusdefault 12
  number

  Corner radius of the tiles in pixels. Only the outer corners of the bar and the corners along an open gap use it; a closed seam sits at 0 so the tiles read as one shape. Leave it out to follow the size: 8 (xs), 10 (sm), 12 (md), 14 (lg). A value you pass overrides the size preset.

• value
  number

  Index of the selected item. Pass it to control the nav yourself; leave it out and the nav follows the URL when the items have hrefs, and its own state otherwise.

• defaultValuedefault 0
  number

  Index the nav starts on when it is uncontrolled. Ignored once value is passed, and ignored when an item href matches the current URL.

• onChange
  (index: number) => void

  Fires with the index of the item that was clicked.

• className
  string

  Extra classes merged onto the root element (data-slot="gooey-nav"). The bar sizes to its content and never wraps, so add an overflow container around it if it can outgrow its parent.

Parts

FAQ

More React navigation components