tabs indicator underline navigation active animate selected tabs improve state change in segmented navigation add directional emphasis to app tabs tab state change feels flat active tab indicator is too static navigation needs a small but meaningful motion cue
Tab Indicator Slide
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/tab-indicator-slide.json Background
Customize
Quick Start
<button class="tab-indicator-slide" aria-selected="true">Overview</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 646 bytes · 31 lines
- Custom Properties
-
--tab-indicator-height - Classes
-
.tab-indicator-slide
tabs indicator underline navigation active
Apply .tab-indicator-slide to each tab trigger. The underline appears when aria-selected="true" or .is-active is present, making tab changes feel clearer without adding heavy animation.