What is Nav tabs and pills in Bootsrap?

Nav tabs and pills in Bootsrap - Syntax, Examples & Explanation

Introduction

Nav tabs and pills help organize content into sections that users can switch between easily. They make websites cleaner and easier to navigate.

When you want to show different content without leaving the page.

To group related information in a small space.

When you want users to switch between views like profile, settings, or messages.

To create a menu with clear active states.

When you want a simple way to highlight the current section.

Syntax

Bootsrap

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Tab</a>
  </li>
</ul>

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

Use nav-tabs for tab style navigation and nav-pills for pill style navigation.

Add active class to highlight the current tab or pill.

Examples

This creates a tab navigation with two tabs: Home (active) and Profile.

Bootsrap

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile">Profile</a>
  </li>
</ul>

This creates a pill navigation with two pills: Messages (active) and Settings.

Bootsrap

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings">Settings</a>
  </li>
</ul>

You can add disabled tabs by adding the disabled class to the nav-link and setting tabindex="-1" and aria-disabled="true" for accessibility.

Bootsrap

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Tab</a>
  </li>
</ul>

Sample Program

This example shows two navigation styles: tabs and pills. Clicking each tab or pill changes the visible content below it. It uses Bootstrap 5's JavaScript for switching content and includes accessibility roles and labels.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Nav Tabs and Pills Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Nav Tabs and Pills Demo</h1>

    <section aria-label="Navigation Tabs">
      <h2>Tabs</h2>
      <ul class="nav nav-tabs" 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" aria-controls="home" 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" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
        </li>
      </ul>
      <div class="tab-content p-3 border border-top-0" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <p>Welcome to the Home tab content.</p>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          <p>This is the Profile tab content.</p>
        </div>
      </div>
    </section>

    <section aria-label="Navigation Pills" class="mt-5">
      <h2>Pills</h2>
      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="messages-pill" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="true">Messages</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="settings-pill" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
        </li>
      </ul>
      <div class="tab-content p-3 border border-top-0" id="myPillContent">
        <div class="tab-pane fade show active" id="messages" role="tabpanel" aria-labelledby="messages-pill">
          <p>You have no new messages.</p>
        </div>
        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-pill">
          <p>Adjust your settings here.</p>
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Use button elements with data-bs-toggle for better accessibility and Bootstrap JavaScript support.

Always include aria-controls, aria-selected, and roles for screen readers.

Bootstrap's JavaScript must be included for tabs and pills to switch content properly.

Summary

Nav tabs and pills organize content into clickable sections.

Use nav-tabs for tab style and nav-pills for pill style navigation.

Include accessibility attributes and Bootstrap JS for interactive switching.