underline navigation hover slide directional indicator active navigation active indicator tab underline animation menu item hover effect static underlines lack motion need directional enter/exit underline want GPU-accelerated nav indicator
Nav Underline Slide
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/nav-underline-slide.json Background
Customize
Quick Start
<a class="nav-underline-slide" href="#">About</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 706 bytes · 34 lines
- Custom Properties
-
--indicator-color--indicator-height--indicator-speed - Classes
-
.nav-underline-slide
underline navigation hover slide directional indicator active
A directional underline that slides in from the right on hover and slides out to the left on unhover. The trick is transform-origin swap — bottom right when hidden, bottom left when shown. Uses scaleX for GPU acceleration (no layout reflow). Supports aria-current="page" for active state.
Navigation bar
<nav class="flex gap-6">
<a href="#" class="nav-underline-slide py-2">Home</a>
<a href="#" class="nav-underline-slide py-2" aria-current="page">About</a>
<a href="#" class="nav-underline-slide py-2">Contact</a>
</nav>Accent colored
<a href="#" class="nav-underline-slide" style="--indicator-color: oklch(0.6 0.25 250); --indicator-height: 2px">
Services
</a>