Skip to content
Pinky UI

navigation

Neighbor Shift Navigation

A compact navigation strip whose active destination gains real width and makes adjacent destinations move around it.

  • navigation
  • active-state
  • neighbor-response

Live preview

Quick usage

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

<NeighborShiftNavigation items={items} />

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
itemsNavigationLink[]—A short set of peer destinations.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The active destination uses aria-current and every item remains a native link.
  • Keyboard focus changes the same active state as pointer focus.

Performance

  • The response is limited to one flex row.
  • No continuous pointer tracking or cloned navigation surfaces are mounted.

Reduced motion

Width changes snap to their readable active state while the selected destination remains explicit.

When to use

  • Small peer sets with one clearly current destination

When not to use

  • More than seven destinations or multi-level navigation

Skill

Purpose

NeighborShiftNavigation makes the active destination gain real width while nearby items yield space. It is a compact way to make a current location feel spatially anchored without adding a second indicator layer.

Interaction anatomy

  • Active item: selection, pointer attention and keyboard focus share one state.
  • Shift: the active link receives more room and neighbours rebalance.
  • Current marker: aria-current and a small metadata cue make the state readable.
  • Touch: tapping selects; the row does not depend on hover.

Live example

Focus or move across the links in the preview. The active item expands within the same strip and remains a normal destination.

Usage

tsx
import { NeighborShiftNavigation } from "@pinky-ui/experiences";

<NeighborShiftNavigation items={sections} aria-label="Project sections" />;

Tune

  • Use three to seven short labels.
  • Keep the width difference modest so every destination remains scannable.
  • Do not combine it with another moving active pill in the same row.

Accessibility

Keep every item as a native link, expose the active location with aria-current, and provide a focus ring that remains inside the reflowing row.

Reduced motion

Snap the active width to its final value. Current state and destination order must remain clear without the shift animation.

Open this skill on its own page