Bootstrap Navs & Tabs — Tabbed and Pill Navigation

In this tutorial, you will learn about Bootstrap Navs & Tabs. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap navs provide flexible navigation components with tab and pill styles, horizontal and vertical orientations, fill/justify distribution, and dropdown menus.

What You'll Learn

You will learn how to create tab and pill navigation, make navs vertical or horizontal, use fill and justify for equal width, add dropdowns to navs, and implement tab content toggling.

Why It Matters

Tabbed navigation organizes content without page reloads. DodaTech's product pages use Bootstrap nav pills to switch between features, specifications, and reviews.

Real-World Use

Doda Browser's settings panel uses Bootstrap nav tabs to separate General, Privacy, Security, and Advanced settings sections with JavaScript-powered content switching.

flowchart LR
    A[Navbar] --> B[Navs & Tabs]
    B --> C[Tab Style]
    B --> D[Pill Style]
    B --> E[Vertical Layout]
    B --> F[Tab Content]
    B --> G[Dropdowns]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Base Nav

<ul class="nav">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Expected output: Four nav items in a horizontal row with the first highlighted as active and the last grayed out as disabled.

Tab Style

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Tab 3</a>
  </li>
</ul>

Expected output: Tabs with bottom borders that make them look like folder tabs. The active tab has a border that connects it to content below.

Pill Style

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active Pill</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pill 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pill 3</a>
  </li>
</ul>

Expected output: Nav items with fully rounded backgrounds. The active pill has a filled background color.

Fill and Justify

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Equal width (fill)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 4</a>
  </li>
</ul>

<ul class="nav nav-pills nav-justified mt-3">
  <li class="nav-item">
    <a class="nav-link active" href="#">Justified</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
</ul>

Expected output: The first row has equal-width items filling the entire nav width. The second row also fills the width but each item may wrap text.

Vertical Navs

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Vertical active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Vertical link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Vertical link</a>
  </li>
</ul>

Expected output: Nav items stacked vertically instead of horizontally.

Nav with Dropdowns

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
       aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated action</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Expected output: A tab navigation with a dropdown menu in the middle.

Tab Content with JavaScript

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
            data-bs-target="#home" type="button" role="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
            data-bs-target="#profile" type="button" role="tab">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
            data-bs-target="#contact" type="button" role="tab">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">
    Home content goes here.
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel">
    Profile content goes here.
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel">
    Contact content goes here.
  </div>
</div>

Expected output: Clicking each tab shows the corresponding content panel and hides others. Active tab has a smooth fade transition.

Common Mistakes

1. Missing role Attributes

Nav elements need role="tablist", buttons need role="tab", and content panels need role="tabpanel" for Accessibility.

2. Using data-bs-target Without Matching id

The data-bs-target="#home" must match the content panel's id. If they differ, the tab does not toggle content.

3. Forgetting fade Class on Content Panels

The fade class provides smooth transition animation. Without it, panels switch instantly without visual feedback.

4. Mixing Tabs and Pills in One Nav

A nav should use either tabs or pills, not both. Using nav-tabs and nav-pills on the same nav causes conflicting styles.

5. Disabled Links Still Receiving Focus

Disabled nav links need tabindex="-1" and aria-disabled="true" to prevent keyboard focus and screen reader announcement.

Practice Questions

1. What is the difference between nav-tabs and nav-pills? nav-tabs creates folder-like tab appearance with bottom borders. nav-pills creates rounded pill buttons.

2. How do you make nav items stack vertically? Add flex-column class to the nav element.

3. What class makes nav items equal width? nav-fill makes items equal width. nav-justified also makes them equal but allows text wrapping.

4. How do you link a tab to its content panel? Use data-bs-toggle="tab" and data-bs-target="#id" on the tab button, matching the content div's id.

5. What is the role attribute for the tab container? role="tablist" on the nav container, role="tab" on each button, role="tabpanel" on content panels.

Challenge

Create a product page with three tabs (Features, Specifications, Reviews). Each tab should show different content with smooth fade transitions. Use JavaScript to activate the first tab by default.

FAQ

Mini Project

Build a dashboard page with vertical pill navigation on the left side. Each pill switches the main content area to show Dashboard, Analytics, Settings, and Users panels. Use the grid system for the sidebar layout.

What's Next

Master Bootstrap Cards for content containers. Then explore Modals for dialog overlays.