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 JavascriptDropdown menu
      	
 //Javascript
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });
   
  
Initialization With jQueryDropdown 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>
<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

  
    Fornt-End Tutorials
    arrow_drop_down
  
      cloud_uploadHTML5
    
      cloud_downloadCSS3
    
      Tailwind 34
    
      Pure CSS 36
    
      Bulma33
    
    Fornt-End Tutorials
    arrow_drop_down
  
      cloud_uploadHTML5
    
      cloud_downloadCSS3
    
      Tailwind 34
    
      Pure CSS 36
    
      Bulma33

Materialize CSS Dropdown

Basic Steps To Create Materialize Dropdown Menu:

Initialization With Javascript

Dropdown menu

Initialization With jQuery

Dropdown menu

Dropdown Icons and Badges

Web Tutorials