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

Open Demo

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

Open Demo

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

Open Demo

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

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS