Tabs
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
This component requires Javascript for initialization. Click to view Javascript.
Apple
Apricot
Avocado
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple">Apple</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot">Apricot
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado">Avocado</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="apple">Apple</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="apricot">Apricot</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="avocado">Avocado</div>
</div>Icon top
Movies
Music
Pictures
<ul class="icon-top nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#movies">
<i class="bi bi-film"></i> Movies
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#music">
<i class="bi bi-music-note-beamed"></i> Music
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#pictures">
<i class="bi bi-image"></i> Pictures
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="movies">Movies</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="music">Music</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="pictures">Pictures</div>
</div>Icon right
Movies
Music
Pictures
<ul class="icon-right nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#movies2">
<i class="bi bi-film m-1"></i> Movies
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#music2">
<i class="bi bi-music-note-beamed m-1"></i> Music
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#pictures2">
<i class="bi bi-image m-1"></i> Pictures
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="movies2">Movies</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="music2">Music</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="pictures2">Pictures</div>
</div>Icon bottom
Movies
Music
Pictures
<ul class="icon-bottom nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#movies3">
<i class="bi bi-film"></i> Movies
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#music3">
<i class="bi bi-music-note-beamed"></i> Music
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#pictures3">
<i class="bi bi-image"></i> Pictures
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="movies3">Movies</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="music3">Music</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="pictures3">Pictures</div>
</div>Icon left
Movies
Music
Pictures
<ul class="icon-left nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#movies4">
<i class="bi bi-film m-1"></i> Movies
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#music4">
<i class="bi bi-music-note-beamed m-1"></i> Music
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#pictures4">
<i class="bi bi-image m-1"></i> Pictures
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="movies4">Movies</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="music4">Music</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="pictures4">Pictures</div>
</div>Color options
Make use of --bs-nav-tabs-link-color, --bs-nav-tabs-link-hover-bg, --bs-nav-tabs-link-active-color &
--bs-nav-tabs-link-active-hover-bg css variables to personalize it according to your brand’s style.
Classes .base-[color] & .primary-[color] are depricated in v3.1.1
Apple
Apricot
Avocado
<ul class="nav nav-tabs nav-justified" role="tablist"
style="--bs-nav-tabs-link-color: var(--bs-success-active);
--bs-nav-tabs-link-hover-bg: var(--bs-success-subtle);
--bs-nav-tabs-link-active-color: var(--bs-tertiary-hover);
--bs-nav-tabs-link-active-hover-bg: var(--bs-tertiary-subtle); ">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple1">Apple</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot1">Apricot
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado1">Avocado</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="apple1">Apple</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="apricot1">Apricot</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="avocado1">Avocado</div>
</div>Tabs split to multiple rows when there are too many to fit on a row
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple2">Apple</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot2">Apricot
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado2">Avocado</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#banana2">Banana</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#blackberry2">Blackberry
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#blackcurrant2">
Blackcurrant
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#blueberry2">Blueberry
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#boysenberry2">
Boysenberry
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#cherry2">Cherry</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#coconut2">Coconut</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#grape2">Grape</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#kiwi2">Kiwi</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#lychee2">Lychee</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#mango2">Mango</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#melon2">Melon</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#orange2">Orange</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#peach2">Peach</button>
</li>
</ul>Javascript
// Initialize tabs
var tabs = [].slice.call(document.querySelectorAll('.nav-tabs'))
tabs.map(function (tab) {
new materialstyle.MaterialTab(tab)
})
Redraw
If a Tab is not visible at the time of initialization OR if it is within a container that is not visible by default,
for example, Modal, Collapse, Offcanvas, you need to call the redraw() function on the instance when it becomes visible.
var myModal = document.getElementById('myModal')
myModal.addEventListener('shown.bs.modal', function (event) {
// Redraw Tabs
var tabs = this.querySelectorAll('.nav-tabs');
for (const [, value] of Object.entries(tabs)) {
var tabInstance = materialstyle.MaterialTab.getOrCreateInstance(value)
tabInstance.redraw();
}
});
With jQuery
// Initialize tabs
$('.nav-tabs').materialtab();
// Redraw Tab
$('.nav-tabs').materialtab('redraw');
Ripple effect
Ripple effect requires Javascript. Click to view Javascript.
Learn more about Ripple.
Apple
Apricot
Avocado
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple3">
Apple
<span class="ripple-surface"></span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot3">
Apricot
<span class="ripple-surface"></span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado3">
Avocado
<span class="ripple-surface"></span>
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="apple3">Apple</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="apricot3">Apricot</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="avocado3">Avocado</div>
</div>Ripple effect on tabs with custom color
Apple
Apricot
Avocado
<ul class="nav nav-tabs nav-justified" role="tablist"
style="--bs-nav-tabs-link-color: var(--bs-success-active);
--bs-nav-tabs-link-hover-bg: var(--bs-success-subtle);
--bs-nav-tabs-link-active-color: var(--bs-tertiary-hover);
--bs-nav-tabs-link-active-hover-bg: var(--bs-tertiary-subtle); ">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple4">
Apple
<span class="ripple-surface"></span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot4">
Apricot
<span class="ripple-surface"></span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado4">
Avocado
<span class="ripple-surface"></span>
</button>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" role="tabpanel" id="apple4">Apple</div>
<div class="tab-pane container-fluid active" role="tabpanel" id="apricot4">Apricot</div>
<div class="tab-pane container-fluid fade" role="tabpanel" id="avocado4">Avocado</div>
</div>Javascript for ripple
// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
return new mdc.ripple.MDCRipple(s)
})
