Materialize CSS Dropdown

Materialize CSS Dropdown

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

   	
<!-- 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.

Dropdown menu

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

Step: 3 - Initialize the dropdown either by Javascript or jQuery.

Dropdown menu

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

<!-- 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>    
Try It Now

Source Code

Download
<!-- 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>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS