Skip to content
Pinky UI

mobile

Floating Dock Navigation

A resting dock expands the selected destination and keeps one contextual action attached to the same lower surface.

  • mobile
  • navigation
  • dock
  • context
  • touch
Related pattern

A product dock with contextual ownership, distinct from a desktop dock imitation or a floating create island.

Live preview

Quick usage

usage
import { FloatingDockNavigation } from "@pinky-ui/systems";

<FloatingDockNavigation items={items} actionLabel="New" onAction={create} />

Install

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

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

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Floating Dock Navigation is a compact lower dock whose selected destination expands and can expose one contextual action. It keeps navigation and the nearest creation action in one mobile surface without imitating a desktop operating-system dock.

Use when

  • A product has a persistent lower navigation model plus one frequent contextual action.
  • The action should remain near the current destination.

Interaction

Tap an item to expand its label and lift it slightly from the dock. The trailing action remains a stable button and never depends on hover.

Accessibility

Use a labelled nav, aria-current for the current destination and a separate accessible name for the contextual action. Keep every item keyboard reachable.

Reduced motion

Keep the expanded label and selected state but remove lift, width and opacity travel.

Tune

  • Limit the dock to four destinations plus one action.
  • Keep the action meaningful to the current task.
Open this skill on its own page