Tab Nav 

<!-- Tab navigation starts -->
<nav class="c-tab-nav">
    <ul class="c-tab-nav__list">
        <li class="c-tab-nav__item"><a class="c-tab-nav__link c-btn c-btn--link" href="#0">Tab item</a></li>
        <li class="c-tab-nav__item"><a class="c-tab-nav__link c-btn c-btn--link is-active" href="#0">Tab item</a></li>
        <li class="c-tab-nav__item"><a class="c-tab-nav__link c-btn c-btn--link" href="#0">Tab item</a></li>
        <li class="c-tab-nav__item"><a class="c-tab-nav__link c-btn c-btn--link" href="#0">Tab item</a></li>
    </ul>
</nav>
<!-- Tab navigation ends -->
 
<!-- Tab navigation starts -->
<nav class="c-tab-nav">
  <ul class="c-tab-nav__list">
    {{#each tabNavItem }}
    <li class="c-tab-nav__item"><a class="c-tab-nav__link c-btn c-btn--link{{#if tabActive }} is-active{{/if}}" href="#0">{{ tabText }}</a></li>
    {{/each}}
  </ul>
</nav>
<!-- Tab navigation ends -->
 
{
  "tabNavItem": [
    {
      "tabText": "Tab item"
    },
    {
      "tabText": "Tab item",
      "tabActive": "yes"
    },
    {
      "tabText": "Tab item"
    },
    {
      "tabText": "Tab item"
    }
  ]
}
  • Content: 
    .c-tab-nav__list {
  display: flex;
  align-items: center;
  overflow: auto;
}
  .c-tab-nav__item {
    margin-right: $space-md
  }
    .c-tab-nav__link {
      position: relative;
      padding: $space-xs $space-sm;
      border-radius: 0;
      color: rgba($color-brand-secondary-800, 0.5);
      font-size: $text-size-6;
      text-decoration: none;
      text-transform: uppercase;

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        margin: 0 auto;
        background-color: $color-brand-secondary-800;
        content: '';
        transition: $global-transition--slow;
      }

      @include acthocus {
        color: $color-brand-secondary-800;
        text-decoration: none;
      };

      &:focus {
        outline: rem(1) dotted $color-grey-200;
        box-shadow: none;
      }

      &.is-active {

        &::after {
          width: 100%;
          height: rem(2.6);
        }
      }

      &:active {
        padding: $space-sm $space-sm $space-xxs;
      }
    }
  • URL: /components/raw/tab-nav/_tab-nav.scss
  • Filesystem Path: components/_code-components/navigation/tab-nav/_tab-nav.scss
  • Size: 1.1 KB
  • Content: 
    var parentNav = document.querySelectorAll('.c-tab-nav .c-btn');

for (var i = 0, l = parentNav.length; i < l; i++) {

  parentNav[i].onclick = function() {
    parentNav.forEach(function(elem) {
      elem.classList.remove("is-active");
    });
    element = this;
    if (element.classList.contains("is-active")) {
      element.classList.remove("is-active");
    } else {
      element.classList.add("is-active");
    }
    return false;
  }
}
  • URL: /components/raw/tab-nav/tab-nav.js
  • Filesystem Path: components/_code-components/navigation/tab-nav/tab-nav.js
  • Size: 446 Bytes

There are no notes for this item.