Gooey Nav Indicator

Use Gooey Nav Indicator when nav personality matters; use Active Pill Slide for cleaner product UI.

Use

A playful nav where the active selection should feel like one continuous moving object.

Avoid

Avoid it when navigation clarity matters more than personality.

Safer Alternative

Tab Underline Slide

Risk Level

High attention

Timing

180-360ms; route changes should still feel immediate.

Easing

Use a spring or ease-out with slight shape morphing.

Risk

overdesignedaccessibility sensitive

Live Demo

HomeWorkAbout

What It Is

A soft blob-like active indicator that morphs between navigation items, making the selected route feel continuous and playful.

Decision Guidance

Use Gooey Nav Indicator when nav personality matters; use Active Pill Slide for cleaner product UI.

Best For

A playful nav where the active selection should feel like one continuous moving object.

Avoid When

Avoid it when navigation clarity matters more than personality.

Timing

180-360ms; route changes should still feel immediate.

Easing

Use a spring or ease-out with slight shape morphing.

Risk Tags

overdesignedaccessibility sensitive

Alternatives

Tab Underline Slide Active Pill Slide Dock Proximity Scale

✓When to Use

Small tab bars
Playful landing navigation
Segmented navigation with short labels

✕When NOT to Use

Long sidebars
Enterprise navigation with many destinations
Multi-select filters

Configuration Tips

01Use it for three to five items only
02Keep the active state readable without relying on blend modes
03Avoid excessive blob stretching that makes the selected item ambiguous

You've Seen It In

Creative portfoliosCampaign micrositesExperimental nav bars

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a three-item nav where a dark rounded blob slides and subtly morphs under the active item when clicked.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

'use client';
import { useState } from 'react';

export function GooeyNavIndicator() {
  const [active, setActive] = useState(0);
  const items = ['Home', 'Work', 'About'];

  return (
    <nav className="relative flex rounded-full bg-stone-100 p-1">
      <span className="absolute bottom-1 top-1 w-24 rounded-full bg-stone-950 transition-[transform,border-radius] duration-300 ease-out" style={{ transform: `translateX(${active * 96}px)`, borderRadius: active === 1 ? 18 : 999 }} />
      {items.map((item, index) => (
        <button key={item} onClick={() => setActive(index)} className={`relative z-10 h-10 w-24 text-sm font-medium transition-colors ${active === index ? 'text-white' : 'text-stone-600'}`}>
          {item}
        </button>
      ))}
    </nav>
  );
}

Related Effects

Tab Underline Slide

A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.

Magnetic Snap Button

When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.

Active Pill Slide

A rounded active background that glides from one segmented option or filter chip to another, making the selected state feel continuous instead of abruptly changing.