Skip to content
Pinky UI

navigation

Liquid Navbar

A semantic navbar with a softly stretching spring active surface.

  • navigation
  • navbar
  • active-state
  • responsive

Live preview

Quick usage

usage
import { LiquidNavbar } from "@pinky-ui/experiences";

<LiquidNavbar items={items} activeId={active} onActiveChange={setActive} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsLiquidNavbarItem[]—Short destination or local-view items.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Uses a labelled nav with native links or buttons.
  • Arrow, Home and End keys move focus and selection; active links expose aria-current.

Performance

  • One measured indicator moves without changing layout.
  • ResizeObserver updates geometry only when item sizes change.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Compact primary or section navigation

When not to use

  • Dense or multi-level application menus

Skill

Purpose

LiquidNavbar gives a small primary navigation one soft, spring-driven active surface. Use it for compact site sections, portfolios and product sub-navigation where the selected destination must stay unmistakable.

Keep labels short, use roughly three to six items and leave the default travel restrained. Avoid it for dense admin menus, multi-level information architecture or alongside another animated menu. The surface should support selection, never obscure it.

Use real href links for destinations and buttons only for local views. Arrow, Home and End keys, visible focus and aria-current/aria-pressed must remain intact. Mobile may scroll horizontally; reduced motion keeps an immediate active surface. Compose with a calm Hero, not a second goo effect.

Open this skill on its own page