Tabs

‹ Back

These tabs piggyback off of toggle.js by taking some shorthand attributes and automatically converting them when rendering.

Tab #1
Tab #2
Tab #3 
<div class="tabs">
  <nav aria-label="Example Tabs" class="tabs--links">
    <ul>
      <li><button class="tabs--link active" data-tab="tab1_1" data-tab-group="tab1">Tab #1</button></li>
      <li><button class="tabs--link" data-tab="tab1_2" data-tab-group="tab1">Tab #2</button></li>
      <li><button class="tabs--link" data-tab="tab1_3" data-tab-group="tab1">Tab #3</button></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>

Mapping to toggle attributes

Anchor
Add: data-tab="tabId" data-tab-group="groupId"
Will get translated to data-toggle-anchor="tabId" data-toggle-group="groupId" data-toggle-one-way data-toggle-timing="1"

Pane
Add: data-tab-for="tabId"
Translates to: data-toggle="tabId" data-tab-immediate

The first anchor in the group will get data-toggle-anchor-default and matching pane will get data-toggle-default.

Knowing this, you can roll your own custom tab implementations just using the toggle attributes if the defaults are too opinionated.

Tab #1
Tab #2
Tab #3 
<div class="tabs">
  <nav aria-label="Example One-Way Tabs" class="tabs--links">
    <ul>
      <li><button class="tabs--link active" data-toggle-anchor="tab-toggle_1" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1" data-toggle-anchor-default>Tab #1</button></li>
      <li><button class="tabs--link" data-toggle-anchor="tab-toggle_2" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1">Tab #2</button></li>
      <li><button class="tabs--link" data-toggle-anchor="tab-toggle_3" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1">Tab #3</button></li>
    </ul>
  </nav>
  <div class="tabs--panes">
    <div class="tabs--pane" data-toggle="tab-toggle_1" data-toggle-default>
      Tab #1
    </div>
    <div class="tabs--pane" data-toggle="tab-toggle_2">
      Tab #2
    </div>
    <div class="tabs--pane" data-toggle="tab-toggle_3">
      Tab #3
    </div>
  </div>
</div>