Back to UI Elements
ui-003
Magnetic Pill Navigation
£5 Standard License Unlimited projects
Tab bar with a lime pill that slides to whichever link is hovered or active, easing in with an elastic spring.
About This Component
Tab bar with a lime pill that slides to whichever link is hovered or active, easing in with an elastic spring. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three visual variants (vault, soft and paper) switched by a single data-variant attribute, so you can preview it in a style close to your own site before restyling.
What's Included
- Sliding indicator measures each link, so labels can be any width
- elastic.out easing gives the pill a spring settle
- Dark text follows the pill so the highlighted label is always readable
- Re-measures after web fonts load and on resize
- Returns to the current link when the pointer leaves the bar
- Three shipped variants: vault, soft, paper
Perfect For
- Secondary navigation on product and docs pages
- Section switchers inside dashboards
- Pricing and settings tab bars
How It Works
Measured indicator
Each link is measured with getBoundingClientRect relative to the bar; the indicator is positioned with x and width from those numbers with left: 0 in CSS, so nothing is offset twice.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates