Skip to content
Pinky UI

navigation

Floating Island Nav

A compact elevated navigation island with optional proximity and scroll collapse.

  • navigation
  • floating
  • landing-page
  • responsive

Live preview

Quick usage

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

<FloatingIslandNav items={items} collapseOnScroll proximity />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

collapseOnScroll={false} proximity={false}

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
collapseOnScrollbooleanfalseTucks the island away on deliberate downward scroll.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • Scroll state stays in MotionValues rather than React renders.
  • Optional proximity reuses the Magnetic primitive.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Sparse landing-page navigation

When not to use

  • Pages already using a fixed dock or dense header

Skill

Purpose

FloatingIslandNav is a compact elevated navigation surface for landing pages and portfolios. Reach for it when navigation should remain available without occupying a full-width header.

Use few items, modest elevation and at most one optional response: proximity or scroll collapse. Avoid copying Dynamic Island proportions, covering page controls, or pairing it with another fixed dock. Confirm safe-area and content clearance on small screens.

The internal Liquid Navbar retains links, focus and active semantics. Scroll collapse must never make keyboard focus disappear; reduced motion removes travel and mobile simplifies the surface. Shared scroll/pointer sources keep it cheap—do not add per-frame state.

Open this skill on its own page