Materialize CSS Dropdown

Materialize Dropdown Classes

There are following predefined classes in the materialize dropdown menu.

• dropdown-trigger - This class is used by a material dropdown button (dropdown trigger button).
• dropdown-content - It is used by dropdown containers (unordered list (<ul>)).

How To Create Dropdown In Materialize CSS ?

To create materializecss dropdown menu, follow the given below steps.

1. Dropdown Trigger Button - To make trigger button, use either hyperlink or button element and add .btn followed by .dropdown-trigger class to the button. Add data-target attribute i.e. (data-target="dropdown_id") to the button and its value will be the dropdown container Id value.

   Dropdown Trigger button

      	
   	<!-- Dropdown Trigger Button-->
   	<a class="dropdown-trigger btn" href="#" data-target="dropdown_id">Dropdown Trigger Button!</a>
   <!-- Dropdown Trigger Button-->
   <button class='dropdown-trigger btn' data-target='dropdown_id'>Dropdown Trigger Button</button>
   	   

2. Dropdown Menu - To make dropdown menu, add .dropdown-content class to the dropdown container. It should contain unique Id value that will be assigned to the button's data-target attribute value .Do not forget to add dropdown item inside the dropdown container.

   Dropdown menu

      	
   	  <ul id="dropdown_id" class="dropdown-content"></ul> 
   	   

3. Dropdown Initialization - Initialize the dropdown either by Javascript or jQuery.

   Dropdown Menu Initialization

      	
   	 //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

If you want to divide dropdown menu item through the horizontal line then use .divider class to the empty <li> element.

Dropdown With Icons and Badges

You can also add icons as well as a badge in the dropdown menu. To add the material icon, simply assign material-icon class to the <i> tag.
To insert the badge, add .badge class to the <span> element.If you want to set default background color to the badge, then add an additional .new class to the <span> element.