Tabs

Documentation for tabs and tab components.

Files

app/styles/modules/_tabs.scss
app/scripts/modules/tabs.js

Tabs

Tabs consist of two main parts tabs .tabs and panels .tabs-panels. Tabs contains multiple tab elements with one in active state. Same applies to panels.

Javascript dependency

Tabs functionality is binded to .js-tabs class. Tabs element needs to specify targeted panels element with [data-tabs-panel=selector] attribute. Each tab element needs to specify [data-tab=selector] to select concrete tab to show. Example of this functionality is shown on example below.

Note

If you want to disable url hash changing on specific tab, you can achieve that by setting [data-tab-hash="false"] on that tab.

Example:

Tab 1
Tab 2
Tab 3

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 2

Tab 3

Code:

<ul class="tabs js-tabs" data-tabs-panel="#tabs-1">
  <li class="tabs_tab">
    <a class="tabs_tab_content active" data-tab="#tab-1">Tab 1</a>
  </li>
  <li class="tabs_tab">
    <a class="tabs_tab_content" data-tab="#tab-2">Tab 2</a>
  </li>
  ...
</ul>
<div class="tabs-panels" id="tabs-1">
  <div class="tabs-panels_panel active" id="tab-1">
    ...
  </div>
  <div class="tabs-panels_panel" id="tab-2">
    ...
  </div>
  ...
</div>

Inline tabs

Inlining tabs inside content can be done via wrapper .tabs-inline which gives tabs more separate look.

Example:

Tab 1
Tab 2
Tab 3

Tab 1

Tab 2

Tab 3

Code:

<div class="tabs-inline">
  <ul class="tabs js-tabs">
    ...
  </ul>
  <div class="tabs-panels">
    ...
  </div>
</div>