Article Categories

Selected Reading

Creating a Tabbed pills and Vertical pills navigation menu in Bootstrap

Bootstrap CSS Front End Technology

Bootstrap provides several options for creating navigation menus, including tabbed pills and vertical pills. These navigation components use Bootstrap's built-in classes to create stylish and functional menus that work well on all devices.

Syntax

/* Tabbed Pills Navigation */
.nav.nav-pills {
    /* Horizontal pill navigation */
}

/* Vertical Pills Navigation */
.nav.nav-pills.flex-column {
    /* Vertical pill navigation */
}

Method 1: Tabbed Pills Navigation

Tabbed pills arrange navigation links horizontally, where each tab represents a different section. When a tab is clicked, the corresponding content is displayed ?

<!DOCTYPE html>
<html>
<head>
    <title>Tabbed Pills Navigation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Tutorialspoint</h1>
        
        <!-- Tabbed Pills Navigation -->
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
            </li>
        </ul>
        
        <!-- Tab Content -->
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <h3>Home</h3>
                <p>Welcome to the home page! This is the default active tab content.</p>
            </div>
            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                <h3>Profile</h3>
                <p>This is the profile section with user information and settings.</p>
            </div>
            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                <h3>Contact</h3>
                <p>Contact us through this section for any inquiries.</p>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

A horizontal navigation menu with three pill-shaped tabs (Home, Profile, Contact) appears at the top. The Home tab is active by default, showing "Welcome to the home page!" content below. Clicking other tabs switches the content accordingly.

Method 2: Vertical Pills Navigation

Vertical pills arrange navigation links vertically in a column layout. This approach is ideal for sidebar navigation where the menu takes up vertical space ?

<!DOCTYPE html>
<html>
<head>
    <title>Vertical Pills Navigation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .nav-pills .nav-link {
            color: #fff;
            background-color: #6c757d;
            margin-bottom: 5px;
            border-radius: 20px;
        }
        .nav-pills .nav-link:hover,
        .nav-pills .nav-link.active {
            background-color: #007bff;
            color: #fff;
        }
        .tab-content {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            min-height: 200px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>Tutorialspoint</h1>
        <div class="row mt-4">
            <div class="col-md-3">
                <!-- Vertical Pills Navigation -->
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
                    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
                    <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
                </div>
            </div>
            <div class="col-md-9">
                <!-- Tab Content -->
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h3>Home</h3>
                        <p>Welcome to the home page! This vertical navigation provides easy access to all sections.</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h3>Profile</h3>
                        <p>Manage your profile information and account settings here.</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h3>Messages</h3>
                        <p>View and manage your messages and notifications in this section.</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                        <h3>Settings</h3>
                        <p>Configure application settings and preferences here.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

A two-column layout appears with a vertical navigation menu on the left side containing four pill-shaped buttons (Home, Profile, Messages, Settings) stacked vertically. The right column displays the content for the selected tab. The Home tab is active by default with a light gray background.

Key Classes

Class	Description
`.nav`	Base navigation class
`.nav-pills`	Creates pill-style navigation
`.flex-column`	Arranges pills vertically
`.nav-link`	Individual navigation link styling
`.tab-content`	Container for tab content panels
`.tab-pane`	Individual content panel for each tab

Conclusion

Bootstrap's pill navigation components provide flexible options for both horizontal and vertical layouts. Use .nav-pills for horizontal tabs and add .flex-column for vertical arrangements. These components enhance user experience with smooth transitions and responsive design.

Jaisshree

Updated on: 2026-03-15T17:34:57+05:30

795 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next