Wensity

Gooey Navigation Menu

A liquid FAB whose child actions stretch out of the trigger like molten metal.

morph gooeygooeynavigationmenuframer motiontabler icons react
Gooey Navigation Menu component preview

Overview

Gooey Navigation Menu is a React and Tailwind CSS floating action button with a speed dial menu, in Next.js or any React app, where child actions stretch out of the trigger like molten metal. Items fan along an arc set by radius, arc, and direction, and a blur filter on a small wrapper bridges them while only transform and opacity animate. Each petal is a labelled button that runs its action and closes the menu, and reduced motion skips the springs. The wrapper reserves a square the size of the open menu, so leave room around the trigger.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add gooey-navigation-menu

Usage

Import GooeyNavigationMenu from @/components/wensity/gooey-navigation-menu and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { GooeyNavigationMenu } from "@/components/wensity/gooey-navigation-menu";
import { IconShare, IconHeart, IconBookmark, IconMessageCircle } from "@tabler/icons-react";


const items = [
  { id: "share", label: "Share", icon: <IconShare /> },
  { id: "like", label: "Like", icon: <IconHeart /> },
  { id: "save", label: "Save", icon: <IconBookmark /> },
  { id: "reply", label: "Reply", icon: <IconMessageCircle /> },
];


export function GooeyNavigationMenuDemo() {
  return (
    // Blobs default to the theme foreground — white on dark, near-black on
    // light. Recolor with blobClassName / iconClassName:
    //   blobClassName="bg-chili-500" iconClassName="text-white"
    <GooeyNavigationMenu direction="up" arc={170} radius={92} items={items} />
  );
}

Props

PropTypeDefaultDescription
itemsGooeyMenuItem[]-Child items that pop out of the FAB. 3–6 looks best.
radiusnumber96Distance in pixels the children travel from the trigger center.
arcnumber180Arc in degrees the children fan across. 90 is a quarter, 180 a half.
direction"up" | "down" | "left" | "right""up"Direction the arc opens toward.
sizenumber60Diameter of the trigger button in pixels.
childSizenumber44Diameter of each child button in pixels.
defaultOpenbooleanfalseRender with the menu already fanned open. Uncontrolled.
blobClassNamestring"bg-[var(--foreground)]"Classes for the trigger and petal blobs. Defaults to the theme foreground — white on dark, near-black on light. Pass any background utility to recolor, e.g. bg-chili-500.
iconClassNamestring"text-[var(--background)]"Classes for the glyphs riding on the blobs. Defaults to the theme background, i.e. whatever the blobs are not.
classNamestring-Classes for the wrapper that reserves the menu's square stage.

Related components

  • Gooey Dropdown Menu component preview

    Gooey Dropdown Menu

    A capsule trigger drips a menu out of its underside. Arrow keys, live shortcuts, and a clear Delete row come built in.

  • Gooey Search Bar component preview

    Gooey Search Bar

    A search circle stretches into a field, and results drip out below it. Ask Claude, ChatGPT, or Google in one keystroke.

  • Gooey Dock component preview

    Gooey Dock

    A dock of icons in a solid pill. The active capsule stretches to the item you pick and flips its icon and label inside.

  • Gooey Range Slider component preview

    Gooey Range Slider

    Drag the thumb and the filled track stretches with it, then the thumb contracts into a circle when you let go.

Featured in React navbar components.