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
html 
<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
html 
<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
html 
<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
html 
<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
html 
<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

Apple
Apricot
Avocado
html 
<ul class="nav nav-tabs nav-justified primary-pink base-purple" role="tablist">
  <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

html 
<ul class="nav nav-tabs nav-justified base-purple primary-pink" 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.Tab(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.Tab.getOrCreateInstance(value)
    tabInstance.redraw();
  }
});

With jQuery

// Initialize tabs
$('.nav-tabs').tab();


// Redraw Tab
$('.nav-tabs').tab('redraw');

Ripple effect

Ripple effect requires Javascript. Click to view Javascript.
Learn more about Ripple.
Apple
Apricot
Avocado
html 
<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
      <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="#apricot">
      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="#avocado">
      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="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>

Ripple effect on tabs with custom color

Apple
Apricot
Avocado
html 
<ul class="nav nav-tabs nav-justified primary-red base-indigo" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple">
      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="#apricot">
      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="#avocado">
      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="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>

Javascript for ripple

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new mdc.ripple.MDCRipple(s)
})
We are aware that the documentation is incomplete. While we work on it, You may refer to Bootstrap docs or help us by contributing.