Materialize CSS Dropdown

Follow the given below steps to create Materialize 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 Divider

It is a horizontal divider inside the dropdown menu. To add a dropdown divider, simply add .divider class to the empty <li> tag element.

Dropdown With Icon

You can also add materialize icon inside the dropdown menu list items. To add icon, add material-icons class to the <i> tag.