Bootstrap 5 Tabs

Organize content into switchable panels

📑 What are Tabs?

Tabs organize related content into separate panels that users can switch between by clicking tab buttons. They save space and improve navigation by showing only one content section at a time.


<ul class="nav nav-tabs">
    <li class="nav-item">
        <button class="nav-link active">Tab 1</button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active">Content 1</div>
</div>

Tab Features

🔄

Switchable

Toggle between content panels

<button data-bs-toggle="tab">
  Tab
</button>

📂

Multiple Styles

Tabs or pills design

<ul class="nav nav-tabs">
<ul class="nav nav-pills">

🎯

Active State

Highlight current tab

<button class="nav-link active">
  Active Tab
</button>

🎨

Customizable

Style with CSS

.nav-tabs .nav-link {
  color: #0d6efd;
}

🔹 Basic Tabs

Basic tabs organize content into separate panels accessible through clickable navigation buttons, improving interface clarity and space efficiency. Each tab button uses data attributes like `data-bs-target` to link to its corresponding content pane, ensuring only one panel is visible at a time. This UI pattern reduces clutter, simplifies complex information, and enhances user focus by segmenting related content. Commonly used in settings pages, product descriptions, and dashboards, basic tabs are foundational to creating intuitive, tab-based navigation systems that work seamlessly across all modern browsers and devices.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<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">
            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">
            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">
            Contact
        </button>
    </li>
</ul>

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

🔹 Pills Style Tabs

Pills-style tabs offer a modern, rounded design alternative to traditional rectangular tabs, providing a softer visual appeal and improved click targets. Using classes like `nav-pills`, these tabs are ideal for navigation menus, filter options, or segmented controls where a more contemporary look is desired. Their rounded corners and distinct active states enhance usability and aesthetics, making them suitable for marketing sites, admin panels, and applications requiring a polished interface. Pills improve visual hierarchy and user engagement through clear, inviting interactive elements.

<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">
            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">
            Profile
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button">
            Contact
        </button>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home">
        <p>Home pill content.</p>
    </div>
    <div class="tab-pane fade" id="pills-profile">
        <p>Profile pill content.</p>
    </div>
    <div class="tab-pane fade" id="pills-contact">
        <p>Contact pill content.</p>
    </div>
</div>

🔹 Vertical Tabs

Vertical tabs arrange navigation along the side of content, optimizing horizontal space and improving readability for multi-section interfaces. This layout is perfect for dashboards, documentation, or control panels with numerous tabs, as it maximizes vertical content area while keeping navigation accessible. By using flexbox or grid layouts with `flex-direction: column`, vertical tabs provide a clean, organized structure that supports extensive menu items without horizontal crowding. This approach enhances user experience on widescreen monitors and reduces cognitive load through clear, linear navigation.

<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
            <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button">
                Home
            </button>
            <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button">
                Profile
            </button>
            <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button">
                Messages
            </button>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-home">
                <p>Home vertical tab content.</p>
            </div>
            <div class="tab-pane fade" id="v-pills-profile">
                <p>Profile vertical tab content.</p>
            </div>
            <div class="tab-pane fade" id="v-pills-messages">
                <p>Messages vertical tab content.</p>
            </div>
        </div>
    </div>
</div>

🔹 Tabs with Icons

Enhancing tabs with icons boosts visual communication, allowing users to quickly identify functions through recognizable symbols alongside text labels. Integrating icon libraries like Font Awesome with tab navigation improves accessibility, aesthetics, and usability. Icons help differentiate tabs at a glance, which is especially useful in multilingual interfaces or for users with reading preferences. This approach creates a more professional, engaging interface and is widely adopted in applications, admin themes, and modern web designs to convey meaning efficiently and attractively.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<ul class="nav nav-tabs" id="iconTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="icon-home-tab" data-bs-toggle="tab" data-bs-target="#icon-home" type="button">
            <i class="fas fa-home"></i> Home
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="icon-user-tab" data-bs-toggle="tab" data-bs-target="#icon-user" type="button">
            <i class="fas fa-user"></i> Profile
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="icon-cog-tab" data-bs-toggle="tab" data-bs-target="#icon-cog" type="button">
            <i class="fas fa-cog"></i> Settings
        </button>
    </li>
</ul>

<div class="tab-content" id="iconTabContent">
    <div class="tab-pane fade show active" id="icon-home">
        <p>Home content with icon.</p>
    </div>
    <div class="tab-pane fade" id="icon-user">
        <p>Profile content with icon.</p>
    </div>
    <div class="tab-pane fade" id="icon-cog">
        <p>Settings content with icon.</p>
    </div>
</div>