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.
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>
)).
To create materializecss dropdown menu, follow the given below steps.
.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-->
<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>
.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.
<ul id="dropdown_id" class="dropdown-content"></ul>
//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>
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>
Source Code: Output
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>
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>
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.
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>