bootstrap_ref_js_tab

Bootstrap 5 JavaScript Tab Reference

JS Tab (Tab Plugin)

Tabs are a powerful component for organizing content into different panes, where each pane is viewable one at a time. Bootstrap 5 uses a vanilla JavaScript plugin for this functionality.

For a comprehensive guide on creating and using Tabs, refer to tutorials on Bootstrap 5 Tabs.

The Tab Plugin Classes and Attributes

Class / Attribute	Description	Note
.nav, .nav-tabs	Container for the tab navigation. .nav-tabs provides the default Bootstrap tab styling.	See Example Below
.nav-link	Applied to tab trigger elements ( or ) within the .nav.	See Example Below
.active	Indicates the currently active tab trigger and tab pane.	See Example Below
.tab-content	Wrapper for all tab panes.	See Example Below
.tab-pane	Defines a single content pane. Use with an ID.	See Example Below
.fade	Adds a fade transition effect when switching tabs.	See Example Below
.show	Makes a .fade tab pane visible (used with .active).	See Example Below
data-bs-toggle=“tab”	Attribute added to a tab trigger element ( or ) to enable tab functionality.	See Example Below
data-bs-target=“#paneID”	Attribute on the tab trigger, pointing to the id of the corresponding .tab-pane.	See Example Below

Via data-bs-* Attributes (Recommended)

The easiest way to implement tabs is by using data-bs-toggle="tab" on each tab trigger, and data-bs-target pointing to the unique ID of each tab pane. Wrap tab panes in a .tab-content container. Ensure Bootstrap’s JavaScript is included in your project.

<!-- 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" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="menu1-tab" data-bs-toggle="tab" data-bs-target="#menu1" type="button" role="tab" aria-controls="menu1" aria-selected="false">Menu 1</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <h3>HOME</h3>
    <p>Some content in the Home tab.</p>
  </div>
  <div class="tab-pane fade" id="menu1" role="tabpanel" aria-labelledby="menu1-tab">
    <h3>Menu 1</h3>
    <p>Some content in Menu 1.</p>
  </div>
</div>

Note: The example above uses <button> elements as tab triggers, which is recommended for accessibility when not navigating to a new page. You can also use <a> elements.

Via JavaScript

You can also control tabs programmatically using Bootstrap’s Tab JavaScript API:

// Initialize or show a tab using JavaScript

// Example: Select a tab by its ID and show it
const menu1TabTrigger = document.querySelector('#menu1-tab');
if (menu1TabTrigger) {
  const tab = bootstrap.Tab.getOrCreateInstance(menu1TabTrigger);
  tab.show();
}

// Example: Show the first tab in a tab list
const firstTabTrigger = document.querySelector('#myTab .nav-link:first-child');
if (firstTabTrigger) {
  const tab = bootstrap.Tab.getOrCreateInstance(firstTabTrigger);
  tab.show();
}

// Example: Manually trigger tab show on click (if data-bs-toggle is not used)
// This is usually handled automatically by data-bs-toggle="tab"
document.querySelectorAll('.custom-tab-trigger').forEach(triggerEl => {
  triggerEl.addEventListener('click', function (event) {
    event.preventDefault();
    const tab = bootstrap.Tab.getOrCreateInstance(this);
    tab.show();
  });
});

Tab Options

The Tab plugin does not have specific options passed via JavaScript constructor. Behavior is primarily controlled via HTML data attributes (like data-bs-target) and JavaScript methods.

Tab Methods

The following table lists available Tab instance methods.

Method
Description


`myTab.show()`
Activates the tab and its associated content pane. Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs).

`myTab.dispose()`
Destroys an element’s tab instance, removing event listeners and data.

`bootstrap.Tab.getInstance(element)`
Static method to get the tab instance associated with a DOM element.

`bootstrap.Tab.getOrCreateInstance(element)`
Static method to get the tab instance for a DOM element, or create a new one if not initialized.

Tab Events

Bootstrap’s tab plugin includes events for hooking into tab functionality.

Event
Description


`show.bs.tab`
This event fires on tab show, but before the new tab has been shown.

`shown.bs.tab`
This event fires on tab show after a tab has been shown. Use `event.target` for the newly active tab and `event.relatedTarget` for the previous active tab.

`hide.bs.tab`
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).

`hidden.bs.tab`
This event fires after a tab has been hidden (and a new one shown). Use `event.target` for the now hidden tab and `event.relatedTarget` for the new active tab.


Example of using tab events:

const anyTabEl = document.querySelector('#myTab .nav-link'); // Example: get any tab trigger
if(anyTabEl) {
  anyTabEl.addEventListener('shown.bs.tab', function (event) {
    console.log('Current active tab:', event.target.id); // The new active tab
    if (event.relatedTarget) {
      console.log('Previous active tab:', event.relatedTarget.id); // The previous active tab
    }
  });
}