Materialize CSS Dropdown

Basic Steps To Create Materialize Dropdown Menu:

  • Step 1: Assign .btn class to the button class and also assign a data-target attribute to the button.
  • Step 2: Assign .dropdown-content class to the unordered list container base class and create an id attribute inside the unordered list and assign the value of data-target attribute of button.
  • Step 3: Place all the dropdown items inside the unordered list container.
  • Step 4: Initialize the dropdown with the help of either javascript or jquery.

Initialization With Javascript

Dropdown menu

   	
 //Javascript
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });
   

Initialization With jQuery

Dropdown menu

   	
// 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>
  <li>
    <a href="#!">
      <i class="material-icons">view_module</i>
      Web Development
    </a>
  </li>
  <li>
    <a href="#!">
      <i class="material-icons">cloud</i>
      App Development
    </a>
  </li>
</ul>
        
Try it now

Source Code: Output

Dropdown Icons and Badges

Materialize CSS dropdown can be used with font library as well as badge component. Let us understand it with the help of an example.

General Syntax

      <a class="dropdown-trigger btn" href="#" data-target="dropdown-menu"> 
  Click To see Dropdown Menu <i class="material-icons right">arrow_drop_down</i>
</a>
<ul id="dropdown-menu" class="dropdown-content">
  <li>
    <a href="#!" class="blue-text">
      <i class="material-icons">cloud_upload</i>Dropdown Link
    </a>
  </li>
</ul>
    
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

Source Code: Output

Web Tutorials

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