Talentedunicorn logo


Last updated

Tabs are one of those UI components that make it easier to access a lot of information on a single window compared to other approaches i.e. Scrolling, links to different screens/windows etc.

They are quite essential most UI frameworks include tabs as part of the package.

Bootstrap tabs

Bootstrap tabs

Zurb Foundation tabs

Zurb Foundation tabs

Semantic UI tabs

Semantic UI tabs

For the past few months my workflow has been moving towards having less dependency on third-party frameworks and libraries. This gave me more control on what goes into my codebase and hence reduce HTTP calls, overall file sizes and library debugging.

…less dependency on third-party frameworks and libraries…reduce HTTP calls, overall file sizes

While working on a project I needed to have a component that can display data on a tabbed container. With no support for HTML tabs element I decided to attempt making the simplest tab component I could.

The requirements

  • Clean semantic markup
  • Minimal style dependency
  • Supporting JavaScript for necessary interactions

With that I started working towards building the simple tabs

Marking up

The idea was to have a .tab wrapper containing .tab-header for links and .tab-content for the content.

<div class="tab">
  <div class="tab-header">
    <a href="..">...</a>
    <a href="..">...</a>
  <div class="tab-content">....</div>


This was mostly done with Tachyons1 with a bit of some custom bells and whistles. With that said; there’s not much to describe here as far as styling goes


As mentioned earlier, I set out to write minimal JavaScript as possible2. Essentially I had to break what’s needed into

  • Showing active tab content when links are clicked
  • Toggle active state for active link

After a few iterations, I arrived at this class structure

class Tabs {
  constructor(el) {
    // Initialize constants and initial call

  bindClick(links) {
    // Binding click events to handler

  activate(activeLink) {
    // Activate link based on activeLink

  showTab(tabName) {
    // Display tab content


Here’s everything put together on CodePen where you can play around with the code.

If you enjoyed (or hated) this article, do leave me a line below and please do fork the pen and share your version ;)


  1. Tachyons uses semantic classes that describe styles…almost like writing inline css

  2. There’s “mushroom” for improvement of course