Materialize CSS Tabs

Materialize CSS tabs consist of an unordered list of tabs that have hashes corresponding to tab ids. When the user clicks on each tab, then only the container with the corresponding tab id will become visible rest will be closed.

You can add the class .disabled to make a tab inaccessible.

Example
Tabs
  
<ul class="tabs">
  <li class="tab"><a href="#test1">Test 1</a></li>
  <li class="tab"><a class="active" href="#test2">Test 2</a></li>
  <li class="tab"><a href="#test3">Disabled Tab</a></li>
  <li class="tab"><a href="#test4">Test 4</a></li>
</ul>
   
Hashes
  
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>
   
Initialization
  
//Javascript
var instance = M.Tabs.init(el, options);
   // Or with jQuery
 $(document).ready(function(){
  $('.tabs').tabs();
});
   

Source Code

     
      <div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3">
        <a href="#materialize">Materialize CSS</a>
      </li>
      <li class="tab col s3">
        <a class="active" href="#bootstrap5">Bootstrap 5</a>
      </li>
    </ul>
  </div>
  <div id="materialize" class="col s12">
    <p>Learn Materialize CSS Step by step.</p>
  </div>
  <div id="bootstrap5" class="col s12">
    <p>Learn Bootstrap 5 in simple steps.</p>
  </div>
</div>     
    
Try It Now

Fixed Width Tabs

To create fixed width tab, assign the .tabs-fixed-width to the tab container i.e <ul> element base class.

Example

General Syntax

    <ul class="tabs tabs-fixed-width"></ul>
     

Source Code

     
      <div class="row">
  <div class="col s12">
    <ul class="tabs z-depth-1 tabs-fixed-width">
      <li class="tab col"><a href="#graphics">Graphics Design</a></li>
      <li class="tab col"><a href="#webdesign">Web Design</a></li>
    </ul>
    <div id="graphics" class="col s12">
      <p>Learn graphics design</p>
    </div>
    <div id="webdesign" class="col s12">
      <p>Learn Web Design</p>
    </div>
  </div>
</div>     
    
Try It Now

Swipeable Tabs

By setting the swipeable option to true, you can enable tabs where you can swipe on touch enabled devices to switch tabs.

Example

Source Code

     
      <div class="row">
  <div class="col s12">
    <ul id="tabs_swipe" class="tabs">
      <li class="tab col">
        <a class="active" href="#mobileapp">Mobile App Development</a>
      </li>
      <li class="tab col">
        <a href="#software">Software Development</a>
      </li>
      <li class="tab col">
        <a href="#webapp">Web App Development</a>
      </li>
    </ul>
    <div id="mobileapp" class="col s12">
      <h4>Mobile App Developmet</h4>
    </div>
    <div id="software" class="col s12">
      <h3>Software Development</h3>
    </div>
    <div id="webapp" class="col s12">
      <h3>Materialize Web App</h3>
    </div>
  </div>
</div>     
    
Try It Now

Web Tutorials

Materialize CSS Tabs
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS