Materialize CSS Dropdown

Materialize CSS dropdown menu is used to select one or multiple options from the dropdown menu list. Dropdown menu is most commonly used inside the material navigation menu, sidebar menu.

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();
    	   

General Syntax

      <a class="dropdown-trigger btn" href="#" data-target="dropdown1">
  Trigger Dropdown
</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">Dropdown Link</a></li>
</ul>
    
Try it now

Source Code

          <a class="dropdown-trigger btn" href="#" data-target="dropdown1">
  Click Here To See Drodown Menu
</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" 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>
        
Try it now

Source Code: Output

Dropdown Divider

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

General Syntax

      <ul id="dropdown_id" class="dropdown-content">
    <li class="divider"></li>
</ul>
    
Try it now

Source Code

          <!-- 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 class="divider"></li>
</ul>
        
Try it now

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.

General Syntax

      <i class="icon-class">icon</i>
<span class="new badge">badge</span>
    
Try it now

Source Code

          <div class="container">
   <!-- Dropdown Trigger -->
   <a class="dropdown-trigger btn blue" href="#" data-target="dropdown2">
      Fornt-End Tutorials
      <i class="material-icons right">arrow_drop_down</i>
   </a>
   <ul id="dropdown2" class="dropdown-content">
      <li>
         <a href="#!" class="blue-text"><i class="material-icons">cloud_upload</i>HTML5</a>
      </li>
      <li>
         <a href="#!" class="blue-text"><i class="material-icons">cloud_download</i>CSS3</a>
      </li>
      <li class="divider"></li>
      <li>
         <a href="#!" class="blue-text">Tailwind <span class="badge green">34</span></a>
      </li>
      <li>
         <a href="#!" class="blue-text">Pure CSS <span class="new badge purple">36</span></a>
      </li>
      <li>
         <a href="#!" class="blue-text">Bulma<span class="new badge red">33</span></a>
      </li>
   </ul>
</div>
        
Try it now

Web Tutorials

Materialize CSS Dropdown
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4