Learn MATERIALIZE with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Materialize Counter Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Counter</title>
</head>
<body class="container center-align">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group">
<a id="increment" class="btn blue">+</a>
<a id="decrement" class="btn red">-</a>
<a id="reset" class="btn grey">Reset</a>
</div>
<br><br>
<a id="theme-btn" class="btn yellow darken-2">Switch Theme</a>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const body = document.body;
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
isDark = !isDark;
body.classList.toggle('black', isDark);
body.classList.toggle('white', !isDark);
body.classList.toggle('white-text', isDark);
body.classList.toggle('black-text', !isDark);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Demonstrates a simple counter layout using Materialize classes and minimal JavaScript for interactivity.
2
Materialize Navbar Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Navbar</title>
</head>
<body>
<nav class="blue">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
M.Sidenav.init(elems);
});
</script>
</body>
</html>
Demonstrates a responsive navbar using Materialize classes.
3
Materialize Card Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Card</title>
</head>
<body class="container">
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/300">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>This is an example card using Materialize.</p>
</div>
<div class="card-action">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</body>
</html>
Shows a card component layout using Materialize classes.
4
Materialize Modal Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Modal</title>
</head>
<body class="container center-align">
<a class="btn modal-trigger" href="#modal1">Open Modal</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>This is a Materialize modal example.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close btn blue">Close</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
M.Modal.init(elems);
});
</script>
</body>
</html>
Demonstrates a modal popup using Materialize Reveal modal.
5
Materialize Tabs Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Tabs</title>
</head>
<body class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#test1">Tab 1</a></li>
<li class="tab col s3"><a href="#test2">Tab 2</a></li>
<li class="tab col s3"><a href="#test3">Tab 3</a></li>
</ul>
</div>
<div id="test1" class="col s12">Content for Tab 1</div>
<div id="test2" class="col s12">Content for Tab 2</div>
<div id="test3" class="col s12">Content for Tab 3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tabs');
M.Tabs.init(elems);
});
</script>
</body>
</html>
Shows a tabbed interface using Materialize Tabs component.
6
Materialize Collapsible Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Collapsible</title>
</head>
<body class="container">
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>First section content</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Second section content</span></div>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
M.Collapsible.init(elems);
});
</script>
</body>
</html>
Demonstrates a collapsible accordion using Materialize classes.
7
Materialize Carousel Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Carousel</title>
</head>
<body class="container">
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://via.placeholder.com/250"></a>
<a class="carousel-item" href="#two!"><img src="https://via.placeholder.com/250"></a>
<a class="carousel-item" href="#three!"><img src="https://via.placeholder.com/250"></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
M.Carousel.init(elems);
});
</script>
</body>
</html>
Shows an image carousel using Materialize Carousel component.
8
Materialize Tooltip Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Tooltip</title>
</head>
<body class="container center-align">
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover Me</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
M.Tooltip.init(elems);
});
</script>
</body>
</html>
Demonstrates tooltips using Materialize classes.
9
Materialize Floating Action Button Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize FAB</title>
</head>
<body class="container">
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">add</i>
</a>
<ul>
<li><a class="btn-floating green"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">publish</i></a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
M.FloatingActionButton.init(elems);
});
</script>
</body>
</html>
Demonstrates a floating action button using Materialize FAB classes.
10
Materialize Progress Bar Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<title>Materialize Progress Bar</title>
</head>
<body class="container center-align">
<div class="progress">
<div class="determinate" style="width: 50%"></div>
</div>
</body>
</html>
Shows a simple progress bar using Materialize classes.