Materialize CSS Tabs, Working with Tabs in Materialize CSS

Materialize CSS Tutorial

Materialize Tabs

The Materialize CSS tab contains an unordered list of tabs that have hashes (#) corresponding to tab ids. when you click on each tab, only the container with the corresponding tab id will become visible. You can add the class .disabled to make a tab inaccessible.

The Materialize CSS Tabs are following :

Variable width tabs
Fixed width tabs
Scrollable tabs
Swipeable Tabs

Variable width tabs

This tabs are normal tabs and following example.

<div class="row">
   <div class="col s12">
   
        <ul class="tabs z-depth-1">
            <li class="tab col"><a href="#html5">HTML5</a></li>
            <li class="tab col"><a href="#css3">CSS3</a></li>
            <li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
            <li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
            <li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
        </ul>
          
        <div id="html5" class="col s12">
            <h3>HTML5 Tutorial</h3>
        </div>
        <div id="css3" class="col s12">
            <h3>CSS3 Tutorial</h3>
        </div>
        <div id="md_css" class="col s12">
            <h3>Materialize CSS Tutorial</h3>
        </div>
        <div id="bootstrap_4" class="col s12">
            <h3>Bootstrap 4 Tutorial</h3>
        </div>
        <div id="java_script" class="col s12">
            <h3>JavaScript Tutorial</h3>
        </div>
    
  </div> 
</div>

Output :

Fixed width tabs

Add the .tabs-fixed-width class, all tabs are automatically adjust some fixed width.

<div class="row">
   <div class="col s12">
   
        <ul class="tabs z-depth-1 tabs-fixed-width">
            <li class="tab col"><a href="#html5">HTML5</a></li>
            <li class="tab col"><a href="#css3">CSS3</a></li>
            <li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
            <li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
            <li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
        </ul>
          
        <div id="html5" class="col s12">
            <h3>HTML5 Tutorial</h3>
        </div>
        <div id="css3" class="col s12">
            <h3>CSS3 Tutorial</h3>
        </div>
        <div id="md_css" class="col s12">
            <h3>Materialize CSS Tutorial</h3>
        </div>
        <div id="bootstrap_4" class="col s12">
            <h3>Bootstrap 4 Tutorial</h3>
        </div>
        <div id="java_script" class="col s12">
            <h3>JavaScript Tutorial</h3>
        </div>
    
   </div>
</div>

Output :

Scrollable tabs

The scrollable tabs means, are you adding any extra tabs in tab menu the display will be automatically scrolling.

<div class="row">
   <div class="col s12">
   
         <ul class="tabs z-depth-1">
            <li class="tab col"><a href="#html5">HTML5</a></li>
            <li class="tab col"><a href="#css3">CSS3</a></li>
            <li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
            <li class="tab col"><a href="#bootstrap_3">Bootstrap 3</a></li>
            <li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
            <li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
            <li class="tab col"><a href="#jquery">jQuery</a></li>
            <li class="tab col"><a href="#ajax">Ajax</a></li>
            <li class="tab col"><a href="#angular_js">AngularJS</a></li>
            <li class="tab col disabled"><a href="#c_language">C-Language</a></li>
            <li class="tab col"><a href="#java">Java</a></li>
            <li class="tab col"><a href="#php">PHP</a></li>
            <li class="tab col"><a href="#python">Python</a></li>
         </ul>
          
        <div id="html5" class="col s12">
            <h3>HTML5 Tutorial</h3>
        </div>
        <div id="css3" class="col s12">
            <h3>CSS3 Tutorial</h3>
        </div>
        <div id="md_css" class="col s12">
            <h3>Materialize CSS Tutorial</h3>
        </div>
        <div id="bootstrap_3" class="col s12">
            <h3>Bootstrap 3 Tutorial</h3>
        </div>
        <div id="bootstrap_4" class="col s12">
            <h3>Bootstrap 4 Tutorial</h3>
        </div>
        <div id="java_script" class="col s12">
            <h3>JavaScript Tutorial</h3>
        </div>
        <div id="jquery" class="col s12">
            <h3>jQuery Tutorial</h3>
        </div>
        <div id="ajax" class="col s12">
            <h3>Ajax Tutorial</h3>
        </div>
        <div id="angular_js" class="col s12">
            <h3>AngularJS Tutorial</h3>
        </div>
        <div id="c_language" class="col s12">
            <h3>C-Language Tutorial</h3>
        </div>
        <div id="java" class="col s12">
            <h3>Java Tutorial</h3>
        </div>
        <div id="php" class="col s12">
            <h3>PHP Tutorial</h3>
        </div>
        <div id="python" class="col s12">
            <h3>Python Tutorial</h3>
        </div>
   
   </div> 
</div>

Output :

jQuery Plugin Initialization

Tabs are initialized automatically, but if you add tabs dynamically you will have to initialize them like this.

 $(document).ready(function(){
    $('ul.tabs').tabs();
 });

Swipeable Tabs

By setting the swipeable option to true, you can enable tabs where you can swipe on touch enabled devices to switch tabs. Make sure you keep the tab content divs in the same wrapping container.

Note : This is also touch compatible! Try swiping with your finger to scroll through the carousel.

<div class="row">
  <div class="col s12">
  
        <ul id="tabs_swipe" class="tabs">
            <li class="tab col"><a class="active" href="#html5">HTML5</a></li>
            <li class="tab col"><a href="#css3">CSS3</a></li>
            <li class="tab col"><a href="#md_css">Materialize CSS</a></li>
        </ul>
        
        <div id="html5" class="col s12 deep-orange">
            <h3>HTML5 Tutorial</h3>
        </div>
        <div id="css3" class="col s12 light-blue">
            <h3>CSS3 Tutorial</h3>
        </div>
        <div id="md_css" class="col s12 red lighten-2">
            <h3>Materialize CSS Tutorial</h3>
        </div>
    
  </div>
</div>

<!-- Start Swipable Tabs -->
<script type="text/javascript">
	if ($('#tabs_swipe').length) {
      $('#tabs_swipe').tabs({ 'swipeable': true });
    }
</script>
<!-- End Swipable Tabs -->

Output :

Materialize CSS Tutorial