Materialize CSS dropdown is used to select the dropdown item from the dropdown menu list.
Follow the given below steps to create Materialize CSS dropdown menu.
Step: 1 - In step 1 , we can create dropdown trigger button. To create dropdown trigger button, use either hyperlink element or button element and add .btn
class as well as data attribute i.e data-target
to the element.
<!-- Dropdown Trigger Button-->
<a class="dropdown-trigger btn" href="#" data-target="dropdown_id">Trigger Button!</a>
Step: 2 - In step 2 , we can create dropdown menu list. Add the .dropdown-content
class to the unordered list container i.e <ul>
& assign the unordered list container id
attribute value to the data-target
attribute of button.
<ul id="dropdown_id" class="dropdown-content"></ul>
Step: 3 - Initialize the dropdown either by Javascript or jQuery.
//Javascript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});
// Or with jQuery
$('.dropdown-trigger').dropdown();
<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="dropdown_id">Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown_id" class="dropdown-content"></ul>
<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="dropdown_id">Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown_id" class="dropdown-content">
<li><a href="#!">Web Design</a></li>
<li><a href="#!">Graphics Design</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">App Design</a></li>
</ul>