Skip to content
Pinky UI

Floating Dock

A compact contextual dock whose active destination expands with its label and whose pointer response stays an optional desktop enhancement.

  • navigation
  • proximity
  • magnetic
  • depth
  • dock
  • toolbar
  • magnify
  • nav

Quick usage

usage
import { FloatingDock } from "@pinky-ui/components";

<FloatingDock
  items={items}
  magnification={1.35}
  distance={120}
/>

Presets

Subtle

Barely swells. Good beside content.

magnification={1.18} distance={90}

Default

Clear response without theatre.

magnification={1.35} distance={120}

Playful

A statement dock, alone on the page.

magnification={1.6} distance={160}

Install

Add @pinky-ui/components 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/components

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
itemsDockItem[]—Each needs an id, a label and an icon; href or onSelect makes it actionable.
magnificationnumber1.35Scale of the item under the pointer.
distancenumber120Falloff distance in px.
labelsbooleantrueShow the label above the nearest item.
aria-labelstring"Dock"Names the navigation landmark.

Accessibility

  • Renders a nav landmark with a list of real links or buttons.
  • Every item carries a permanent visually-hidden label — the hover label is decoration, not the accessible name.
  • Fully operable by Tab and Enter with no pointer proximity involved.
  • Active items expose aria-current (links) or aria-pressed (buttons), and the active label remains visible for touch users.
  • Magnification is skipped for touch, while the active destination remains named in the surface.

Reduced motion

With prefers-reduced-motion: reduce, items never scale or lift and the hover label stays hidden. The dock is a plain, fully functional row of icons.

When to use

  • A small set of primary destinations or tools
  • Persistent app-level navigation on wide screens
  • Demo and portfolio interfaces

When not to use

  • More than about eight items
  • Primary navigation on mobile, where proximity has no meaning
  • Anywhere the icons are not genuinely recognisable without labels