Back to Dictionary
Page & View Transitions
●○○Ready to Use
Tab Underline Slide
A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.
Live Demo
What It Is
A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.
✓When to Use
- Top-level navigation bars
- Segmented controls
- Pricing plan toggles (Monthly/Yearly)
✕When NOT to Use
- Vertical menus with varying heights
Configuration Tips
- 01Use layoutId in framer-motion to make the underline easily glide between isolated DOM elements
- 02Keep the animation snappy (150-250ms)
You've Seen It In
VercelApple.comStripe
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a tab bar where the active underline smoothly slides over to the tab I just clicked.
Code Example (Tailwind CSS)
export function TabUnderlineSlideDemo() {}