In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo.
If you prefer video, here’s a YouTube version of this post:
- 1 Overview #
- 2 Web Tactics #
- 2.1 The HTML #
- 2.2 Scrolling layouts #
- 2.3 Animation #
- 2.5 Conclusion #
Tabs are a common component of design systems but can take many shapes and forms. First there were desktop tabs built on
element, and now we have buttery mobile components that animate content based on physics properties. They’re all trying to do the same thing: save space.
Today, the essentials of a tabs user experience is a button navigation area which toggles the visibility of content in a display frame. Many different content areas share the same space, but are conditionally presented based on the button selected in the navigation.
Web Tactics #
All in all I found this component pretty straightforward to build, thanks to a few critical web platform features:
scroll-snap-pointsfor elegant swipe and keyboard interactions with appropriate scroll stop positions
- Deep links via URL hashes for browser handled in-page scroll anchoring and sharing support
- Screen reader support with
prefers-reduced-motionfor enabling crossfade transitions and instant in-page scrolling
- The in-draft
@scroll-timelineweb feature for dynamically underlining and color changing the selected tab
The HTML #
Fundamentally, the UX here is: click a link, have the URL represent the nested page state, and then see the content area update as the browser scrolls to the matching element.
There are some structural content members in there: links and
:targets. We need a list of links, which a