Skip to content
Pinky UI

mobile

Scroll-Compact Bottom Navigation

Contracts a mobile navigation bar during meaningful downward reading and restores it when the user reverses direction.

  • mobile
  • navigation
  • scroll
  • compact
  • hysteresis
Related pattern

Scroll changes the density of navigation, not its identity; the bar remains discoverable and restores on reversal.

Live preview

Quick usage

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

<ScrollCompactBottomNav items={items} />

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

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use scroll-compact navigation when reading content benefits from a quieter lower edge, but navigation must return when the user reverses direction.

Interaction anatomy

  • Meaningful downward travel contracts the bar.
  • Upward travel restores the full navigation language.
  • Hysteresis prevents tiny scroll changes from making the surface jitter.

Good for

Content feeds, editorial reading and long mobile collections.

Avoid

Short screens, critical always-visible actions or scroll containers without a stable owner.

Live example

Scroll down to contract the bar, then move back up to restore it.

Usage

tsx
<ScrollCompactBottomNav items={items} />

Tune

Use a meaningful threshold, restore on reversal and never remove the only path to a destination.

Accessibility and reduced motion

Keep labels available to assistive technology and preserve focusable buttons in compact mode. Reduced motion removes travel while the compact state remains understandable.

Open this skill on its own page