Tabs (Legacy)

‹ Back

These tabs are being phased out soon and will be replaced with a new system that ties in to toggle.js


Example tabset:

Tab #1
Tab #2
Tab #3
<div class="tabs">
  <nav class="tabs--links">
    <ul>
      <li><a href="#" class="tabs--link" data-tab="tab1_1">Tab #1</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab1_2">Tab #2</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab1_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab1_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab1_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab1_3">
      Tab #3
    </div>
  </div>
</div>

Passive Deeplinking

Passive deeplinking allows you to employ a tabset and deeplink to a particular pane. Interacting with the tabs will not update the URL.

You can passively deeplink to a tab by passing in the data-tab attribute as a hash in the URL. <a href="/my-page#tab-2"> will link to tab-2 on /my-page.

You can also open a tab with a link outside of the tabset, as long as it has a matching tab id inside a data-tab-link attribute. eg. This link will open up tab three. The link has a data attribute of data-tab-link="tab1_3", which is the data-tab id of the third tab. It's worth also adding the tab id to the href so that if the user opens the link in a new window, it will still deeplink to the tab. Here is how to properly write a link that opens up a tab outside of the tab container:

...
<li><a href="#" class="tabs--link" data-tab="tab1_1">Tab #1<a></li>
<li><a href="#" class="tabs--link" data-tab="tab1_2">Tab #2<a></li>
<li><a href="#" class="tabs--link" data-tab="tab1_3">Tab #3<a></li>
...
<a href="#tab1_3" data-tab-link="tab1_3">This link lives outside of a tabset, but will open a tab.</a>

Active Deeplinking

You can turn on active deeplinking by adding data-tabs-deeplink to the main tabs container. Active deeplinking will update the URL as the user clicks on the tabs.

Notice that clicking on these tabs will update your URL.

Tab #1
Tab #2
Tab #3
<div class="tabs" data-tabs-deeplink>
  <nav class="tabs--links">
    <ul>
      <li><a href="#" class="tabs--link" data-tab="tab2_1">Tab #1</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab2_2">Tab #2</a></li>
      <li><a href="#" class="tabs--link" data-tab="tab2_3">Tab #3</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-tab-for="tab2_1">
      Tab #1
    </div>
    <div class="tabs--pane" data-tab-for="tab2_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-tab-for="tab2_3">
      Tab #3
    </div>
  </div>
</div>

Select menu fallback on smaller screens

To make your tabs fall back to a select menu, simple add data-tabs-fallback-select attribute. to your tabs container.

The select menu will appear when the tabs are too long to fit on the screen.

Tab #1
Tab #2
Tab #3
Tab #4
Tab #5
Tab #6
Tab #7
<div class="tabs" data-tabs-fallback-select>
  <nav class="tabs--links">
    <ul>
        <li><a href="#" class="tabs--link" data-tab="tab_select_1">Tab #1</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_2">Tab #2</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_3">Tab #3</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_4">Tab #4</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_5">Tab #5</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_6">Tab #6</a></li>
        <li><a href="#" class="tabs--link" data-tab="tab_select_7">Tab #7</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
      <div class="tabs--pane" data-tab-for="tab_select_1">
        Tab #1
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_2">
        Tab #2
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_3">
        Tab #3
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_4">
        Tab #4
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_5">
        Tab #5
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_6">
        Tab #6
      </div>
      <div class="tabs--pane" data-tab-for="tab_select_7">
        Tab #7
      </div>
  </div>
</div>

Swipable Tabs Proof of Concept

Not ready for production, see TODO.md

Swipable tabs allow the user to swipe the tab row to access tabs that are not able to fit on-screen.

As always, adding a data attribute will enable this, data-tabs-swipable.

Tab #1
Tab #2
Tab #3
Tab #4
Tab #5
Tab #6
Tab #7
Tab #8
Tab #9
Tab #10
<div class="tabs" data-tabs-swipable style="max-width: 300px;">
  <nav class="tabs--links">
    <ul>
        <li><a class="tabs--link" data-tab="tab_swipe_1">Tab #1</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_2">Tab #2</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_3">Tab #3</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_4">Tab #4</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_5">Tab #5</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_6">Tab #6</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_7">Tab #7</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_8">Tab #8</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_9">Tab #9</a></li>
        <li><a class="tabs--link" data-tab="tab_swipe_10">Tab #10</a></li>
    </ul>
  </nav>
  <div class="tabs--panes">
      <div class="tabs--pane" data-tab-for="tab_swipe_1">
        Tab #1
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_2">
        Tab #2
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_3">
        Tab #3
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_4">
        Tab #4
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_5">
        Tab #5
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_6">
        Tab #6
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_7">
        Tab #7
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_8">
        Tab #8
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_9">
        Tab #9
      </div>
      <div class="tabs--pane" data-tab-for="tab_swipe_10">
        Tab #10
      </div>
  </div>
</div>

Global settings

Active deeplinking can be enabled at the top of the javascript file by changing activeDeeplinking to true.

Swipable tab overscroll value can be adjusted by changing the tabOverScroll value.


Events

You can call javascript functions when a tab changes with:

$(document).on("ornament:tab-change", function(){ ... })