Nav tabs and pills in Bootsrap

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>

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.

Practice

1. What is the main difference between nav-tabs and nav-pills in Bootstrap navigation?

easy

A. nav-tabs requires JavaScript, nav-pills does not.

B. nav-tabs shows tabs with borders, nav-pills shows rounded pill-shaped links.

C. nav-tabs is for vertical menus, nav-pills is for horizontal menus only.

D. nav-tabs disables links, nav-pills enables links.

Solution

1. Step 1: Understand Bootstrap navigation styles

   nav-tabs creates a tab-like navigation with rectangular borders around each item.

2. Step 2: Compare with nav-pills

   nav-pills styles navigation links as rounded pills, giving a softer look.

3. Final Answer:

   nav-tabs shows tabs with borders, nav-pills shows rounded pill-shaped links. -> Option B

4. Quick Check:

   Tabs = rectangular, Pills = rounded [OK]

Hint: Tabs have edges, pills are rounded shapes [OK]

Common Mistakes:

• Thinking nav-tabs are vertical only
• Believing nav-pills don't need JS
• Confusing disabled/enabled states

2. Which of the following is the correct Bootstrap class to create a pill-style navigation list?

easy

A. <ul class='nav-tabs'>

B. <ul class='nav nav-tabs-pills'>

C. <ul class='nav nav-pills'>

D. <ul class='nav pills'>

Solution

1. Step 1: Recall Bootstrap classes for pills

   The correct class for pill navigation is nav-pills combined with nav.

2. Step 2: Check each option

   <ul class='nav nav-pills'> uses nav nav-pills, which is correct. Others have incorrect or non-existent classes.

3. Final Answer:

   <ul class='nav nav-pills'> -> Option C

4. Quick Check:

   Use nav nav-pills for pills [OK]

Hint: Use both 'nav' and 'nav-pills' classes together [OK]

Common Mistakes:

• Using only 'pills' without 'nav'
• Combining 'nav-tabs' and 'pills' incorrectly
• Misspelling class names

3. Given this Bootstrap nav tab code snippet, what will be the visual result in the browser?

<ul class='nav nav-tabs' role='tablist'>
  <li class='nav-item'>
    <a class='nav-link active' href='#home' role='tab' aria-selected='true'>Home</a>
  </li>
  <li class='nav-item'>
    <a class='nav-link' href='#profile' role='tab' aria-selected='false'>Profile</a>
  </li>
</ul>

medium

A. Two tabs labeled 'Home' and 'Profile', with 'Home' highlighted as active.

B. Two pill-shaped buttons labeled 'Home' and 'Profile', both inactive.

C. A vertical list of links with no active highlight.

D. Tabs labeled 'Home' and 'Profile' but both disabled.

Solution

1. Step 1: Analyze the classes and attributes

   The nav-tabs class creates tab style navigation. The nav-link active class highlights the 'Home' tab as active.

2. Step 2: Understand the visual effect

   'Home' tab will appear selected with a border, 'Profile' will appear as a normal tab link.

3. Final Answer:

   Two tabs labeled 'Home' and 'Profile', with 'Home' highlighted as active. -> Option A

4. Quick Check:

   Active tab is highlighted in nav-tabs [OK]

Hint: Active tab uses 'nav-link active' class [OK]

Common Mistakes:

• Confusing pills with tabs visually
• Assuming both tabs are active
• Ignoring role and aria attributes

4. Identify the error in this Bootstrap nav pills code snippet:

<ul class='nav nav-pills'>
  <li class='nav-item'>
    <a class='nav-link active' data-toggle='tab' href='#home'>Home</a>
  </li>
  <li class='nav-item'>
    <a class='nav-link' data-toggle='tab' href='#profile'>Profile</a>
  </li>
</ul>

medium

A. The attribute data-toggle should be data-bs-toggle in Bootstrap 5+.

B. The class nav-pills is invalid and should be nav-tabs.

C. The href attributes must be full URLs, not fragment IDs.

D. The nav-item class should be on the a tags, not li.

Solution

1. Step 1: Check Bootstrap version attribute changes

   Bootstrap 5 replaced data-toggle with data-bs-toggle for JavaScript plugins.

2. Step 2: Verify other attributes and classes

   nav-pills is valid, href can use fragment IDs, and nav-item belongs on li.

3. Final Answer:

   The attribute data-toggle should be data-bs-toggle in Bootstrap 5+. -> Option A

4. Quick Check:

   Use 'data-bs-toggle' in Bootstrap 5+ [OK]

Hint: Bootstrap 5 uses 'data-bs-toggle' not 'data-toggle' [OK]

Common Mistakes:

• Using old Bootstrap 4 attributes
• Misplacing classes on wrong elements
• Thinking href must be full URL

5. You want to create a responsive Bootstrap nav with pills that switch content panels on click. Which combination of classes and attributes is correct to ensure accessibility and proper tab switching?

hard

A. <ul class='nav nav-pills'> <li class='nav-item'> <a class='nav-link' href='#home' role='tab' aria-selected='false'>Home</a> </li> </ul>

B. <ul class='nav nav-tabs' role='navigation'> <li> <a class='nav-link' href='#home'>Home</a> </li> </ul>

C. <div class='nav nav-pills'> <a class='nav-link' data-toggle='tab' href='#home'>Home</a> </div>

D. <ul class='nav nav-pills' role='tablist'> <li class='nav-item'> <a class='nav-link active' id='home-tab' data-bs-toggle='pill' href='#home' role='tab' aria-controls='home' aria-selected='true'>Home</a> </li> </ul>

Solution

1. Step 1: Identify correct classes and roles for pills navigation

   Use nav nav-pills on ul with role='tablist' for accessibility.

2. Step 2: Check anchor attributes for tab switching and accessibility

   Anchors need id, data-bs-toggle='pill', href to panel, role='tab', aria-controls, and aria-selected.

3. Step 3: Confirm active state on the selected tab

   The active tab has nav-link active and aria-selected='true'.

4. Final Answer:

   <ul class='nav nav-pills' role='tablist'> <li class='nav-item'> <a class='nav-link active' id='home-tab' data-bs-toggle='pill' href='#home' role='tab' aria-controls='home' aria-selected='true'>Home</a> </li> </ul> -> Option D

5. Quick Check:

   Use 'nav-pills' with proper roles and 'data-bs-toggle' [OK]

Hint: Use 'data-bs-toggle', roles, and aria attributes for tabs [OK]

Common Mistakes:

• Omitting role or aria attributes
• Using old 'data-toggle' instead of 'data-bs-toggle'
• Missing active class on selected tab