Navtabs provide a tab-based navagation directly in your content, allowing users to click from tab to tab to see different panels of content. Navtabs are especially helpful for showing code samples for different programming languages. The only downside to using navtabs is that you must use HTML instead of Markdown.

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.

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">

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.

Tags: formatting