Tabbed Nav

Below is an example of a tabbed navigation:

<nav class="tab-nav u-push-2x">
  <ul class="tab-nav__menu-items">

    <li class="menu-toggle js-slide-toggle" 
        data-target=".tab-nav__item:not(.is-current):not(.item--cta)" 
        data-parent=".tab-nav" 
        aria-hidden="true"></li>

    <li class="tab-nav__item is-current"><a href="#">Nav Item 1</a></li>
    <li class="tab-nav__item"><a href="#">Nav Item 2</a></li>
    <li class="tab-nav__item"><a href="#">Nav Item 3</a></li>
    <li class="tab-nav__item item--cta"><a href="#">Call to Action</a></li>

  </ul>
</nav>

<br/><br/>

Menu Toggle

The .menu-toggle list item is for toggling the tab-nav menu at viewport widths less than the $lg breakpoint. It employs the js-slide-toggle framework. See the slide toggle docs for more information on using the framework.

Specify a CSS selector for the elements that should be toggled with the data-target attribute. In this case, we want to target .tab-nav__item elements that DO NOT have the is-current or item--cta class:

data-target=".tab-nav__item:not(.is-current):not(.item--cta)"

The data-parent attribute should specify the block-level element, .tab-nav.

data-parent=".tab-nav"

States

The is-current class can be used to style the current or active menu item.

<li class="tab-nav__item is-current"><a href="#">Nav Item 1</a></li>

Modifiers

Use the item--cta modifier class to format the last element as a right-aligned button.

<li class="tab-nav__item item--cta"><a href="#">Call to Action</a></li>