Skip to main content

Navs & tabs

Documentation and examples for how to use boodoo's included navigation components.

Base nav

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Pills

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Soft pills

<ul class="nav nav-pills-soft">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

Active tab content.

Second tab content.

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#tab-a" data-boodoo-toggle="tab">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-b" data-boodoo-toggle="tab">Link</a></li>
</ul>

Underline (Material)

Use .nav-underline for a Material-style tab indicator.

<ul class="nav nav-underline">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

Vertical

Stack your navigation by changing the flex direction with .nav-vertical (or the flex-column utility).

<ul class="nav nav-vertical nav-pills flex-column demo-nav-vertical">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

Tabs with JavaScript

To make the nav switch content, add data-boodoo-toggle="tab" (or "pill") to each nav link and give the target panes ids matching the link href. boodoo wires everything up automatically.

Home tab content.

Profile tab content.

<div class="nav nav-pills mb-2" role="tablist">
  <button class="nav-link active" id="pills-home-tab" data-boodoo-toggle="pill" data-boodoo-target="#pills-home"
    type="button" role="tab">Home</button>
  <button class="nav-link" id="pills-profile-tab" data-boodoo-toggle="pill" data-boodoo-target="#pills-profile"
    type="button" role="tab">Profile</button>
</div>
<div class="tab-content pt-1">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel"><p class="mb-0">Home tab content.</p></div>
  <div class="tab-pane fade d-none" id="pills-profile" role="tabpanel"><p class="mb-0">Profile tab content.</p></div>
</div>