Bootstrap 5 Framework

Navs and Tabs

13 min Lesson 23 of 40

Navs and Tabs in Bootstrap 5

Bootstrap provides flexible navigation components that can be styled as tabs, pills, or basic navigation lists with support for active states and disabled items.

1. Base Nav Styles

The base .nav class provides the foundation for navigation components:

<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">Disabled</a>
    </li>
</ul>
        

Note: The .nav class doesn't include default styling for active states. You need to add modifier classes like .nav-tabs or .nav-pills.

2. Navigation with Tabs

Add .nav-tabs to create a tabbed interface:

<ul class="nav nav-tabs">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>
        

3. Navigation with Pills

Add .nav-pills for a pill-style navigation:

<ul class="nav nav-pills">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>
        

4. Fill and Justify

Force navigation items to extend across the full width:

<!-- Fill: Items take up proportional width -->
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" 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>

<!-- Justify: Items take equal width -->
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
        <a class="nav-link active" 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>
        

Tip: Use .nav-fill when you want items sized proportionally, and .nav-justified when you want all items the same width.

5. Vertical Navigation

Stack navigation items vertically using .flex-column:

<ul class="nav flex-column">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

<!-- Vertical Pills -->
<ul class="nav nav-pills flex-column">
    <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>
</ul>
        

6. Tab Content

Create dynamic tabbed interfaces with JavaScript integration:

<!-- Nav Tabs -->
<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>

<!-- Tab Panes -->
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel">
        <p>Home content goes here...</p>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel">
        <p>Profile content goes here...</p>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel">
        <p>Contact content goes here...</p>
    </div>
</div>
        

Note: Tab content requires the data-bs-toggle="tab" attribute and matching data-bs-target values.

7. Pills with Tab Content

Use pills instead of tabs for a different look:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab"
                data-bs-toggle="pill" data-bs-target="#pills-home"
                type="button" role="tab">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab"
                data-bs-toggle="pill" data-bs-target="#pills-profile"
                type="button" role="tab">Profile</button>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel">
        Home content...
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel">
        Profile content...
    </div>
</div>
        

8. Vertical Pills with Tabs

Create a side navigation with content panels:

<div class="row">
    <div class="col-3">
        <ul class="nav nav-pills flex-column" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill"
                        data-bs-target="#v-pills-home">Home</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill"
                        data-bs-target="#v-pills-profile">Profile</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill"
                        data-bs-target="#v-pills-settings">Settings</button>
            </li>
        </ul>
    </div>
    <div class="col-9">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="v-pills-home">
                Home content...
            </div>
            <div class="tab-pane fade" id="v-pills-profile">
                Profile content...
            </div>
            <div class="tab-pane fade" id="v-pills-settings">
                Settings content...
            </div>
        </div>
    </div>
</div>
        

9. JavaScript API

Control tabs programmatically with JavaScript:

// Initialize tab
const triggerTabList = document.querySelectorAll('#myTab button');
triggerTabList.forEach(triggerEl => {
    const tabTrigger = new bootstrap.Tab(triggerEl);

    triggerEl.addEventListener('click', event => {
        event.preventDefault();
        tabTrigger.show();
    });
});

// Show specific tab
const triggerEl = document.querySelector('#profile-tab');
bootstrap.Tab.getInstance(triggerEl).show();

// Listen to tab events
const tabEl = document.querySelector('button[data-bs-toggle="tab"]');
tabEl.addEventListener('shown.bs.tab', event => {
    console.log('New tab:', event.target); // newly activated tab
    console.log('Previous tab:', event.relatedTarget); // previous active tab
});
        

Exercise

Create a tabbed interface for a product page that includes:

Three tabs: "Description", "Specifications", "Reviews"
Use nav-pills style
Each tab pane should contain sample content
Add a fade effect when switching tabs
Make the tabs responsive (use nav-fill on mobile)
Include at least one disabled tab labeled "Videos (Coming Soon)"