Key insights
- The active indicator should slide, never teleport. Drive it with a spring and match its timing to the content fade — slow in, fast out.
- When tabs overflow one screen, never wrap to a second line. Scroll horizontally, add edge fades to hint at what's off-screen, and put chevron buttons on desktop.
- Make it keyboard-operable: arrows move between tabs, Home jumps to first, End to last, and Tab exits to the next focusable group.
- The focus ring and the active state must never share a color — otherwise keyboard users can't tell where they are versus what's selected.
- Content should never hard-cut on switch. Fade out, pause ~80ms, fade in, and match panel heights so nothing shifts.
- Mobile isn't a shrunk desktop: use a segmented control under 5 tabs, a bottom sheet over 5, never a scaled-down bar.
Do / Don't
- Do: Slide the active indicator with a spring, timed to match the content fade
- Do: Scroll an overflowing tab row horizontally with edge fades and desktop chevrons
- Do: Give the focus ring and active state distinct colors
- Don't: Wrap an overflowing tab row onto a second line
- Don't: Hard-cut content on switch — fade out, pause, fade in instead
- Don't: Reuse the desktop tab bar shrunk down on mobile
