Tabs – Design Portal

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time.

Demo

<div class="tabs">
  <h2 class="tabs__heading">Must Reads:</h2>
  <button class="tabs__button" type="button" aria-label="Show Categories">Categories</button>
  <nav class="tabs__nav">
    <div class="tabs__list" role="tablist">
      <button class="tabs__tab tabs__tab--active" id="navTabDemo1" type="button" role="tab" aria-controls="navPaneDemo1" aria-selected="true">Budgeting</button>
      <button class="tabs__tab" id="navTabDemo2" type="button" role="tab" aria-controls="navPaneDemo2" aria-selected="false">Credit</button>
    </div>
  </nav>
  <div class="tabs__content">
    <div class="tabs__pane tabs__pane--active" id="navPaneDemo1" role="tabpanel" aria-labelledby="navTabDemo1">
      Pane 1 Content
    </div>
    <div class="tabs__pane" id="navPaneDemo2" role="tabpanel" aria-labelledby="navTabDemo1">
      Pane 2 Content
    </div>
  </div>
</div>

.tabs {
  align-items: start;
  display: grid;
  grid-template-areas: "tabs-nav"
  "tabs-content";
  grid-template-columns: 1fr;
  position: relative;

  &__nav {
    display: flex;
    grid-area: tabs-nav;
    z-index: 2;
  }

  &__list {
    display: flex;
  }

  &__tab {
    @extend %button-reset;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-size: .875rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    transition: color 0.25s ease-in-out;

    &:hover, &:focus {
      color: var(--primary);
    }

    &--active {
      background-color: var(--accent-1);
      color: #FFF;

      &:hover, &:focus {
        color: #FFF;
      }
    }
  }

  &__content {
    border: .0625rem solid var(--light-gray-1);
    grid-area: tabs-content;
    padding: 1rem;
    overflow-x: auto;

    .CodeMirror {
      margin: -1rem;
    }
  }

  &__pane {
    display: none;

    &--active {
      display: block;
    }
  }
}

  function tabs() {
  // Tabs functionality
  const tabsTab = document.querySelectorAll('.tabs__tab');
  const tabsPane = document.querySelectorAll('.tabs__pane');
  const tabsNav = document.querySelector('.tabs__nav');
  const tabsButton = document.querySelector('.tabs__button');
  
  if (typeof tabs !== 'undefined' && tabs !== null) {
    for (let index = 0; index < tabsTab.length; index++) {
      tabsTab[index].addEventListener('click', function () {
        tabsTab.forEach((element) => {
          // Remove active class from all tabs
          element.classList.remove('tabs__tab--active');
          // Set aria false
          element.setAttribute('aria-selected', 'false');
        });

        tabsPane.forEach((element) => {
          // Remove active class from all panes
          element.classList.remove('tabs__pane--active');
        });

        // Add active class to just selected tab
        this.classList.toggle('tabs__tab--active');
        // Add aria attr to just selected tab
        this.setAttribute('aria-selected', 'true');
        // Add active class to pane
        tabsPane[index].classList.add('tabs__pane--active');
      });
    }

    if (tabsButton) {
      // Clicking on tabs button shows tabs nav
      tabsButton.addEventListener('click', function() {
        tabsNav.classList.toggle('tabs__nav--visible');
        this.classList.toggle('tabs__button--active');

        if (this.classList.contains('tabs__button--active')) {
          this.setAttribute('aria-label', 'Hide Categories');
        } else {
          this.setAttribute('aria-label', 'Show Categories');
        }
      });
    }
  }
}

Note

Screenshots are taken from WalletGenius.

States & Variations

Mobile

On mobile, the tabs are converted into a dropdown menu.

Usage

The tabs component must be manually added into the unified theme by a developer.

Anatomy

Tabs
Tabs Heading (optional)
Tabs Nav
Tabs Active Tab
Tabs Inactive Tab
Tabs Content / Tabs Pane