Skip to content
Pinky UI

navigation

Compressing Scroll Navigation

A header that reduces its vertical footprint after deliberate scroll while remaining present and readable.

  • navigation
  • scroll
  • header
  • responsive

Live preview

Pinky / browse

A considered header, still present

Quick usage

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

<CompressingScrollNavigation items={items} compactAfter={96} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

compactAfter={160}

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[]—Header destinations that remain available in both heights.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The header and destination nav remain present in DOM order at both sizes.
  • The compact state never removes the only labels or keyboard targets.

Performance

  • Scroll work is coalesced through requestAnimationFrame and uses hysteresis to avoid thrashing.
  • Listeners are removed on unmount and controlled mode avoids an unnecessary scroll subscription.

Reduced motion

Height and scale switch immediately, with the full navigation still available after compression.

When to use

  • Long pages where a persistent header should give reading space back

When not to use

  • Short pages or headers whose full height carries essential context

Skill

Purpose

CompressingScrollNavigation gives a long page some reading space back by reducing header height after deliberate downward scroll. The header remains present, so navigation does not disappear just when someone is moving through content.

Interaction anatomy

  • Full state: title, context and destinations are visible at the top.
  • Compact state: the same destinations remain in a shorter header.
  • Hysteresis: separate thresholds prevent rapid toggling near the boundary.
  • Controlled mode: previews and coordinated shells can provide their own compressed state.

Live example

Scroll the page or use the preview's controlled state to compare the two header heights. The destination links remain available in both states.

Usage

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

<CompressingScrollNavigation items={items} title="Pinky UI" compactAfter={96} />;

Tune

  • Choose a threshold after the first meaningful reading region.
  • Keep compact labels short and preserve the full route set.
  • Avoid pairing it with a second scroll-collapsing island.

Accessibility

Never remove focused links during compression. Keep DOM order, labels and visible focus stable, and ensure the compact state is still understandable to screen magnification users.

Reduced motion

Switch height and scale immediately. The persistent header and its labels remain available without animated travel.

Open this skill on its own page