Tabs

Documentation for tab components.

Files

app/styles/modules/_tabs.scss

Tabs

Tabs are created using a main wrapper element .tabs, and .tab tabs themselves inside of it. Navigation is wrapped in .tab-nav, navigation items are .tab-nav__item and navigation links need .tab-nav__link for styling and [role=tab] for toggling the tabs themselves.

Note

Tabs are accessible, yay! Proper aria attributes are automatically added on load.

Example:

Lorem ipsum In eiusmod occaecat fugiat nulla sit aute sint Excepteur sed sit cillum laboris officia sit laborum sunt veniam id aute magna et velit aliquip elit in ut proident mollit labore.

Lorem ipsum Ut magna id tempor id sunt aute id ad ut do reprehenderit sint in adipisicing deserunt do aliquip nulla ullamco occaecat.

Lorem ipsum Labore ad et in in labore Ut qui voluptate adipisicing proident laborum sed deserunt amet amet occaecat do consequat sunt Excepteur sint voluptate quis ullamco in quis ut.

Lorem ipsum Veniam qui cupidatat dolore ad nulla in dolore veniam id est cillum quis magna dolore Ut minim in culpa dolore in qui nostrud in.

Code:

<!-- tabs -->
<ul class="tab-nav">
  <li class="tab-nav__item">
    <a class="tab-nav__link" href="#tab-1" role="tab">Tab 1</a>
  </li>
  <li class="tab-nav__item">
    <a class="tab-nav__link" href="#tab-2" role="tab">Tab 2</a>
  </li>
  <li class="tab-nav__item is-active">
    <a class="tab-nav__link" href="#tab-3" role="tab">Tab 3</a>
  </li>
  <li class="tab-nav__item">
    <a class="tab-nav__link is-disabled" href="#tab-4" tabindex="-1">Tab disabled</a>
  </li>
</ul>

<!-- tabs panes-->
<article class="tabs">
  <section id="tab-1" class="tab">
  </section>
  <section id="tab-2" class="tab">
  </section>
  <section id="tab-3" class="tab">
  </section>
  <section id="tab-4" class="tab">
  </section>
</article>

Activate tab on load

To specify an opened tab on load, add .is-active to both .tab-nav__item and .tab. Otherwise, the first tab will be activated on load.

You can even pass a tabs ID into location href, to open it directly by URL and scroll to its position. Enable this behavior by adding data-tab-load to the .tabs container. If there is a fixed header, you can offset the scroll position by passing a number (pixels) or the fixed container query selector to data-tab-load. Try it by visiting Tab 2

Example:

Lorem ipsum In eiusmod occaecat fugiat nulla sit aute sint Excepteur sed sit cillum laboris officia sit laborum sunt veniam id aute magna et velit aliquip elit in ut proident mollit labore.

Lorem ipsum Ut magna id tempor id sunt aute id ad ut do reprehenderit sint in adipisicing deserunt do aliquip nulla ullamco occaecat.

Lorem ipsum Labore ad et in in labore Ut qui voluptate adipisicing proident laborum sed deserunt amet amet occaecat do consequat sunt Excepteur sint voluptate quis ullamco in quis ut.

Code:

<ul class="tab-nav">
  <li class="tab-nav__item">
    ...
  </li>
  <li class="tab-nav__item">
    ...
  </li>
  <li class="tab-nav__item is-active">
    ...
  </li>
</ul>

<article class="tabs" data-tab-load=".l-header-main">
  <section id="tab2-1" class="tab">
    ...
  </section>
  <section id="tab2-2" class="tab">
    ...
  </section>
  <section id="tab2-3" class="tab is-active">
    ...
  </section>
</article>

Toggle

Tabs are compatibble with Toggle. To toggle a tab, use it's ID as the toggle target.

Example:

Lorem ipsum In eiusmod occaecat fugiat nulla sit aute sint Excepteur sed sit cillum laboris officia sit laborum sunt veniam id aute magna et velit aliquip elit in ut proident mollit labore.

Lorem ipsum Ut magna id tempor id sunt aute id ad ut do reprehenderit sint in adipisicing deserunt do aliquip nulla ullamco occaecat.

Lorem ipsum Labore ad et in in labore Ut qui voluptate adipisicing proident laborum sed deserunt amet amet occaecat do consequat sunt Excepteur sint voluptate quis ullamco in quis ut.

Code:

<ul class="tab-nav">
  <li class="tab-nav__item">
    ...
  </li>
  <li class="tab-nav__item">
    ...
  </li>
  <li class="tab-nav__item">
    ...
  </li>
</ul>

<article class="tabs">
  <section id="tab3-1" class="tab">
    ...
  </section>
  <section id="tab3-2" class="tab">
    ...
  </section>
  <section id="tab3-3" class="tab">
    ...
  </section>
</article>

<button class="btn" type="button" href="#tab3-2" data-toggle="#tab3-2">Toggle tab 2</button>