Nav Anchor Slider

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/nav-anchor-slider.json

Preview

Background

Customize

slider speed 0.35s slider ease cubic-bezier(0.34, 1.56, 0.64, 1)

highlight bg

oklch(0.92 0.02 75)

highlight radius 0.5rem

Quick Start

<nav class="nav-anchor-slider flex gap-1 p-1 rounded-xl bg-stone-100"><a href="#" class="px-4 py-2 rounded-lg">Home</a><a href="#" class="px-4 py-2 rounded-lg">About</a><a href="#" class="px-4 py-2 rounded-lg">Contact</a></nav>

Details

Tailwind: v4.x
Browser: chrome-2024
A11y: prefers-reduced-motion, @supports fallback
Size: 1414 bytes · 56 lines
Custom Properties: --highlight-bg--highlight-radius--slider-speed--slider-ease
Classes: .nav-anchor-slider

navigation hover slider anchor-positioning css-only highlight indicator

A colored background that smoothly slides between navigation links as you hover them. No JavaScript, no DOM measurements, no event listeners — just CSS Anchor Positioning.

The trick: each hovered link sets anchor-name: --nav-anchor-active. The ::after pseudo-element uses position-anchor + anchor(left/right/top/bottom) to read the exact geometry of whichever link is currently active and resize/reposition itself there. A spring bezier (cubic-bezier(0.34, 1.56, 0.64, 1)) gives the movement a subtle physical bounce.

A @supports not (anchor-name: --x) block hides the highlight in browsers without support — navigation stays fully functional.

Browser support: Chrome/Edge ✓, Safari ✓, Firefox experimental. Use as progressive enhancement.

Horizontal pill nav

<nav class="nav-anchor-slider flex gap-1 rounded-xl bg-stone-100 p-1">
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium">Home</a>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium">About</a>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium">Articles</a>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium">Contact</a>
</nav>

Dark background variant

<nav
  class="nav-anchor-slider flex gap-1 rounded-xl bg-stone-900 p-1"
  style="--highlight-bg: oklch(0.35 0.03 75); --highlight-radius: 0.4rem"
>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium text-stone-100">Home</a>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium text-stone-100">Docs</a>
  <a href="#" class="rounded-lg px-4 py-2 text-sm font-medium text-stone-100">Blog</a>
</nav>

Accent color highlight

<nav
  class="nav-anchor-slider flex gap-2 border-b border-stone-200 pb-0"
  style="--highlight-bg: oklch(0.6 0.22 250 / 0.15); --highlight-radius: 0.25rem 0.25rem 0 0"
>
  <a href="#" class="px-4 py-3 text-sm font-medium">Overview</a>
  <a href="#" class="px-4 py-3 text-sm font-medium">Features</a>
  <a href="#" class="px-4 py-3 text-sm font-medium">Pricing</a>
</nav>