Tab navigation

This is an extension to the inline navigation style which gives you a tab style navigation for you to display different content.


Building the markup

Building the markup stays the same as building an inline navigation, you just need to add a tabu data attribute and a bit of extra html for each tab content.

First Content
Second Content
Third Content
      
  <ul class="navigation inline" data-tabu data-start-index="1">
<li><a href="#firstContent">I'm a tab</a></li>
<li><a href="#secondContent">I'm a tab to</a></li>
<li><a href="#thirdContent">Tab 3</a></li>
</ul>
<div class="tabu-content">
<div class="content" id="firstContent">
First Content
</div>
<div class="content" id="secondContent">
Second Content
</div>
<div class="content" id="thirdContent">
Third Content
</div>
</div>

Setup

Here are simple steps for you to get a deeper insight:

1. Create an inline navigation style. For more information visit the inline navigation section.

      
<ul class="navigation inline">
      
    

2. Add the tabu data attribute

      
<ul class="navigation inline" data-tabu >      
      
    

3. Add the list item elements with anchors, like so:

      
  <ul class="navigation inline tabs" data-tabu>
<li><a href="#firstContent">I'm a tab</a></li>
<li><a href="#secondContent">I'm a tab to</a></li>
<li><a href="#thirdContent">Tab 3</a></li>
</ul>

4. Add a tabu content div element, this will contain the information for each tab. Each content must match the anchor href attribute.

      
 <div class="tabu-content">
<div class="content" id="firstContent">
First Content
</div>
<div class="content" id="secondContent">
Second Content
</div>
<div class="content" id="thirdContent">
Third Content
</div>
</div>

Javascript usage

You can customize the tabu plugin behavior by Javascript or by data attributes.

Usage

The data attributes match the options you can send to the plugin. Below we provide a fully description on how to use them.

Option Name Data attribute name Type Default Description
startIndex data-start-index integer 0 The start tab content to first display.
tabContentClass data-tab-content-class string tabu-content The tbas wrapper container
tabContentsClass data-tab-contents-class string content The class name for each tab

Under Tabu

For a deeper look into the plugin you can check the furatto.tabs.js plugin file. and the sass file.