Tabs

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.

Some tabs from some of the popular frameworks

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>
  <div class="tab-content">....</div>
</div>

Styles

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

Scripting

As mentioned earlier, I set out to write minimal JavaScript as possible². 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
  }
}

Demo

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 ;)

Footnotes

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

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