Bootstrap Tabs/Pills

Bootstrap Tabs and Pills

Navigational Menus with Tabs and Pills

Bootstrap provides easy ways to create tabbed or pill-based navigation menus. These are commonly built using an unordered list <ul> with specific Bootstrap classes.

A basic HTML list for a menu might look like this:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

To create a simple horizontal inline list menu, you can add the .list-inline class to the <ul> and .list-inline-item to each <li>. However, for more structured navigation, Bootstrap’s Nav component (which includes tabs and pills) is more powerful.

Tabs Navigation

Tabs are created by adding the .nav and .nav-tabs classes to a <ul> element. Individual tab items (<li>) should have the .nav-item class, and their links (<a>) should have the .nav-link class.

Mark the currently active page/tab by adding the .active class to the .nav-link (and optionally aria-current="page" for accessibility).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabs Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tabs with Dropdown Menu

Tabs can also incorporate dropdown menus. Use the standard dropdown structure within a .nav-item.dropdown.

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
</ul>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Pills Navigation

Pills are created similarly to tabs, but use the .nav-pills class on the <ul> element instead of .nav-tabs. The active state is also marked with the .active class on the .nav-link.

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Vertical Pills

To display pills vertically, add the .flex-column utility class to the .nav-pills element. This leverages Bootstrap’s flexbox utilities.

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
  <div class="row">
    <div class="col-md-9">
      <p>Main content area...</p>
    </div>
    <div class="col-md-3">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 3</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Pills With Dropdown Menu

Pills can also contain dropdown menus, just like tabs.

<!DOCTYPE html>
<html lang="en">
<body>
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
</ul>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Fill and Justify Navs

To make tabs or pills take up the full width of their parent, use .nav-fill (each nav item gets an equal share of the available width) or .nav-justified (similar to fill, but text within items is also justified). Note that on screens smaller than 576px (Bootstrap’s sm breakpoint), these navs will stack vertically unless overridden.

<!DOCTYPE html>
<html lang="en">
<body>
<!-- Nav Fill Example -->
<ul class="nav nav-pills nav-fill mb-3">
  <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="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

<!-- Nav Justified Example -->
<ul class="nav nav-tabs nav-justified">
  <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="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Dynamic Tabs and Pills with JavaScript

To make tabs or pills interactive, allowing users to switch between content panes, you need to use Bootstrap’s Tab JavaScript plugin. This is typically done using data-bs-toggle="tab" (or data-bs-toggle="pill") attributes on the links.

Each link’s href or data-bs-target attribute should point to the id of a corresponding .tab-pane element. Wrap all .tab-pane elements in a div with class .tab-content.

For accessibility, add role="tablist" to the <ul>, role="tab" to each tab link, aria-controls on the link pointing to the pane’s ID, and role="tabpanel" with aria-labelledby on each pane.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Tabs Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
      <h3 class="mt-3">HOME Content</h3>
      <p>This is the content for the Home tab. It is shown by default.</p>
    </div>
    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
      <h3 class="mt-3">Profile Content</h3>
      <p>This is some content for the Profile tab.</p>
    </div>
    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
      <h3 class="mt-3">Contact Content</h3>
      <p>Contact information or a form could go here.</p>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The .fade class adds a fade transition, and .show makes the active tab pane visible. Use .active on the initially visible tab link and tab pane.

Dynamic Pills work exactly the same way, just replace .nav-tabs with .nav-pills and ensure data-bs-toggle="pill" is used (though data-bs-toggle="tab" often works interchangeably for this purpose). The core JavaScript functionality is the same.

Complete Bootstrap Navs and Tabs Reference

For a complete reference of all navigation classes, options, methods, and events, please refer to the official Bootstrap documentation on ‘Navs & Tabs’.