Navigation and Tabs

Contents

Standalone tab navigation

This tabbed navigation is used on pages without a left subnav and with a header bar page title. Place this markup directly inside #content. An example of this can be found on the search results page.

<ul id="unique-id" class="nav nav-tabs">
  <li class="active"><a href="#tabPane1" data-toggle="tab">Tab Pane One</a></li>
  <li><a href="#tabPane2" data-toggle="tab">Tab Pane Two</a></li>
  <li><a href="#tabPane3" data-toggle="tab">Tab Pane Three</a></li>
</ul>
<div class="tab-content">
  <div id="tabPane1" class="tab-pane active">
    <!--/content here-->
  </div><!--/tab-pane-->
  <div id="tabPane2" class="tab-pane">
    <!--/content here-->
  </div><!--/tab-pane-->
  <div id="tabPane3" class="tab-pane">
    <!--/content here-->
  </div><!--/tab-pane-->
</div><!--/tab-content-->

Our subnav is displayed on the left, in #sidebar-lt. When there is a header bar on the page (mailbox settings), no section title is necessary. When there is no header bar (company settings), a section title is necessary on top of the subnav. Links in the subnav should also capitalize the first letter of each word.

<section id="sidebar-lt">
 <ul class="nav nav-stacked [modifier class]">
   <li><a href="#">This is a link <i class="badge">22</i></a></li>
   <li class="active"><a href="#">This is an active link <i class="badge">8</i></a></li>
   <li><a href="#">This link even goes two lines! <i class="badge">48</i></a></li>
 </ul>
</section><!--/sidebar-lt-->

Horizontal sidebar buttons

These buttons are used below a stacked nav for secondary links, such as settings. When it’s just an icon, be sure to add a tooltip. It’s also easy to attach dropdowns to them, although you may have to manually position the dropdown menu’s top caret. If there are more or less than 3 links in this menu, some custom styles will be necessary.

<section id="sidebar-lt">
  <div class="sidebar-buttons btn-group">
    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" rel="tooltip" data-placement="bottom" title="Mailbox Settings ( , )" data-container="#wrap"><i class="icon-gear"></i><b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#" tabindex="-1">Edit Mailbox</a></li>
        <li><a href="#" tabindex="-1">Connection Settings</a></li>
        <li><a href="#" tabindex="-1">Mailbox Permissions</a></li>
        <li><a href="#" tabindex="-1">Auto Reply</a></li>
        <li><a href="#" tabindex="-1">Saved Replies</a></li>
        <li><a href="#" tabindex="-1">Workflows</a></li>
      </ul>
    </div>
    <a class="btn" href="#" rel="tooltip" data-placement="bottom" title="New Conversation (G, N)" data-container="#wrap"><i class="icon-new"></i></a>
  </div><!--/sidebar-buttons-->
</section><!--/sidebar-lt-->