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

Soft pills

Tabs

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

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

Vertical

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

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.