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.
<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>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>
//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>
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>
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>
By setting the swipeable option to true, you can enable tabs where you can swipe on touch enabled devices to switch tabs.
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>