The TabStrip, reinvented for the Modern Web

A semantic TabStrip custom tag in pure, standards-only HTML+CSS

The Pure TabStrip

The TabStrip is one of the longest existing visual containers in software development history.

Popularized by early web browsers, this digital version of the physical tabs used in filing cabinets and folders, allows users to quickly switch between different sections or views within an application or website.

The TabStrip remains a versatile and widely-used UI component in modern software applications.

HTML however doesn’t have a native concept of a TabStrip, so numerous libraries and frameworks have come up with their versions.

A Google search for TabStrip web component gives a string of results that lead you either to a big library that has a TabStrip component, a framework that forces a completely different way of working upon you, or this dev.to article with how to build a TabStrip Web Component, containing a lot of complexity for something extremely simple: hiding and showing different sections.

Why all the Code?

What if I told you that you need ZERO JavaScript CODE to achieve more?

Yes, with only HTML and CSS, you can get a TabStrip that looks and feels like a Material Design component.

Pure TabStrip demo

Here’s the HTML. Note the custom tag <tab-strip>:

(Part of) The Pure TabStrip HTML

Did I just say “hiding and showing different sections”?

Look at the HTML. It’s 100% self-explanatory.

Obviously, the trick is mainly in the CSS.

Specifically, these are some CSS tricks I use:

• transition (opacity, position) with easing
• :target pseudo-selector (the main ‘trick’)
• :has()

Here’s the CodePen demo:

Pure TabStrip CodePen demo

Adding functionality

Of course, while this is a great start, you might want to add some more behavior, such as lazy-loading of content, of event-signaling of tab changes.

In that case, feel free to write a Web Component that defines this behavior, and attach it to the <tab-strip> custom tag:

customElements.define(
  "tab-strip",
     class TabStrip extends HTMLElement {
        connectedCallback() {
           // add specific behavior here
        }
     }
);

More Purity

The approach I’m using is illustrated in great detail in PurePWA — A Radical U-Turn in Web Development | by Marc van Neerven | CTO-as-a-Service | Jan, 2024 | Medium.

There’s a #purepwa thread on LinkedIn, and there’s a GitHub Repo.