Styleguides

Shared Assets & Docs

Menu

Add tab functionality to transition through panes of local content.

  1. Add a .tabs class to a <ul> of links for the styling.
  2. Add the functionality with a data attribute of data-toggle-tabs.
  3. Add .tab-pane classes to each section of content.
  4. Point the links within the tabs to the tab panes by using either href or Bootstrap-style data-target.
  5. Add .is-active to the tab and corresponding tab pane you'd like to show first.
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
Tab 5 Content
<ul class="tabs" data-toggle-tabs>
  <li><a href="#pane-1" class="is-active">Tab 1</a></li>
  <li><a href="#pane-2">Tab 2</a></li>
  ...
</ul>
<div id="pane-1" class="is-active">Tab 1 Content</div>
<div id="pane-2">Tab 2 Content</div>
...

Box Tabs

Create tabs attached to a box by using a .box-tabs class.

Note: This also requires a .tabbed-box class on the sibling .box to remove the rounded edges.

Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
Tab 5 Content
<ul class="tabs box-tabs" data-toggle-tabs>
  <li><a href="#pane-1" class="is-active">Tab 1</a></li>
  <li><a href="#pane-2">Tab 2</a></li>
  ...
</ul>
<div class="box tabbed-box">
  <div id="pane-1" class="tab-pane is-active">Tab 1 Content</div>
  <div id="pane-2" class="tab-pane">Tab 2 Content</div>
  ...
</div>