Common uses
Navtabs are particularly useful for scenarios where you want to show a variety of options, such as code samples for Java, .NET, or PHP, on the same page.
While you could resort to single-source publishing to provide different outputs for each unique programming language or role, you could also use navtabs to allow users to select the content you want.
Navtabs are better for SEO since you avoid duplicate content and drive users to the same page.
Navtabs demo
The following is a demo of a navtab. Refresh your page to see the tab you selected remain active.
Profile
Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.about
Match
Vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Code
Here’s the code for the above (with the filler text abbreviated):
<ul id="profileTabs" class="nav nav-tabs">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
<li><a href="#match" data-toggle="tab">Match</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<h2>Profile</h2>
<p>Praesent sit amet fermentum leo....</p>
</div>
<div role="tabpanel" class="tab-pane" id="about">
<h2>About</h2>
<p>Lorem ipsum ...</p></div>
<div role="tabpanel" class="tab-pane" id="match">
<h2>Match</h2>
<p>Vel vehicula ....</p>
</div>
</div>
Design constraints
Bootstrap automatically clears any floats after the navtab. Make sure you aren’t trying to float any element to the right of your navtabs, or there will be some awkward space in your layout.
Appearance in the mini-TOC
If you put a heading in the navtab content, that heading will appear in the mini-TOC as long as the heading tag has an ID. If you don’t want the headings for each navtab section to appear in the mini-TOC, omit the ID attribute from the heading tag. Without this ID attribute in the heading, the mini-TOC won’t insert the heading title into the mini-TOC.
Must use HTML
You must use HTML within the navtab content because each navtab section is surrounded with HTML, and you can’t use Markdown inside of HTML.
Match up ID tags
Each tab’s href attribute must match the id attribute of the tab content’s div section. So if your tab has href="#acme", then you add acme as the ID attribute in <div role="tabpanel" class="tab-pane" id="acme">.
Set an active tab
One of the tabs needs to be set as active, depending on what tab you want to be open by default (usually the first one).
<div role="tabpanel" class="tab-pane active" id="acme">
Sets a cookie
The navtabs are part of Bootstrap, but this theme sets a cookie to remember the last tab’s state. The js/customscripts.js file has a long chunk of JavaScript that sets the cookie. The JavaScript comes from this StackOverflow thread.
By setting a cookie, if the user refreshes the page, the active tab is the tab the user last selected (rather than defaulting to the default active tab).
Functionality to implement
One piece of functionality I’d like to implement is the ability to set site-wide nav tab options. For example, if the user always chooses PHP instead of Java in the code samples, it would be great to set this option site-wide by default. However, this functionality isn’t yet coded.