materialize css tab, materialize tab, materialize tabs

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.

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

Download
<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 yourself

Source Code : Output

Learn Materialize CSS Step by step.

Learn Bootstrap 5 in simple steps.

Fixed Width Tabs

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

General Syntax

<ul class="tabs tabs-fixed-width"></ul>    
Try It Now

Source Code

Download
<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 yourself

Source Code : Output

Learn graphics design

Learn Web Design

Swipeable Tabs

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

Source Code

Download
<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 yourself

Source Code : Output

Mobile App Developmet

Software Development

Materialize Web App

Web Tutorials

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