Floating Pill Header pro

A floating rounded navigation that tucks narrower on scroll, with a highlight that glides between links.

Scroll inside the preview to try it.

Customize

Logo text inside the pill

Menu links (comma separated)

Pill colour

Text colour

Hover highlight colour

Pill width at the top (px)

Pill width after scrolling (px)

Gap between the top of the page and the pill (px)

Scroll distance before it tucks in (px)

Corner roundness (999 = full pill)

Background blur (px)

Animation duration (ms)

sticky stays inside its parent, fixed covers the whole page

import FloatingPillHeader from './FloatingPillHeader';

<FloatingPillHeader />

Checking your access…

Dependencies: none