Skip to content
Pinky UI

mobile

Morphing Bottom Navigation

An icon rail gives the active destination a raised labelled surface while the bar keeps a stable thumb-sized footprint.

  • mobile
  • navigation
  • bottom
  • morph
  • touch
Related pattern

Active context changes geometry above a stable mobile rail; it is not only an active colour state.

Live preview

Quick usage

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

<MorphingBottomNavigation items={items} value={activeId} onValueChange={setActiveId} />

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

Morphing Bottom Navigation gives the active destination a raised, labelled surface while the surrounding destinations stay compact and reachable. It is useful when a mobile product needs stronger current-location language without changing routes or making the bar jump.

Use when

  • Four or fewer primary destinations need persistent thumb access.
  • The active destination deserves geometry and label priority, not only a colour change.

Interaction

Tap a destination to move the active surface. The inactive items retain a 44px hit area and the bar keeps its lower-edge ownership.

Accessibility

Use aria-current="page" for the active destination and keep the label available to assistive technology when the visual label is compact. Provide real links when destinations change routes.

Reduced motion

Remove the lift and width transition; swap the active geometry immediately while preserving the active label and current-location semantics.

Tune

  • Keep the destination count short.
  • Reserve enough width for the longest active label.
Open this skill on its own page