Materialize CSS Dropdowns, Working with Dropdowns in Materialize CSS

Materialize CSS Tutorial

Materialize Dropdowns

Materialize CSS provides dropdown facility, it provides several CSS classes to add a dropdown list to any button. Make sure that the data-activates attribute matches the id in the <ul> tag. You can add a divider with the <li class="divider"></li> tag. You can also add icons. Just add the icon inside the anchor tag.

<div class="container">
    <!-- Dropdown Trigger -->
    <a class='dropdown-button btn blue' href='#' data-activates='dropdown1'>Click Here!</a>
    
    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content'>
        <li><a href="#!" class="blue-text">one</a></li>
        <li><a href="#!" class="blue-text">two</a></li>
        <li class="divider"></li>
        <li><a href="#!" class="blue-text">three</a></li>
        <li><a href="#!" class="blue-text">four</a></li>
        <li><a href="#!" class="blue-text">five</a></li>
	</ul>
</div>

Output :

Dropdown Icons and Badges

<div class="container">
    <!-- Dropdown Trigger -->
    <a class='dropdown-button btn blue' href='#' data-activates='dropdown1'>Fornt-End Tutorials <i class="material-icons right">arrow_drop_down</i></a>
    
    <!-- Dropdown Structure -->
    <ul id='dropdown1' 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">Bootstrap 3 <span class="badge">34</span></a></li>
        <li><a href="#!" class="blue-text">Bootstrap 4 <span class="new badge purple">36</span></a></li>
        <li><a href="#!" class="blue-text">Material Design <span class="new badge red">33</span></a></li>
        
    </ul>
</div>

Output :

Options

Option Name	Description
inDuration	The duration of the transition enter in milliseconds. Default: 300
outDuration	The duration of the transition out in milliseconds. Default: 225
constrainWidth	If true, constrainWidth to the size of the dropdown activator. Default: true
hover	If true, the dropdown will open on hover. Default: false
gutter	This defines the spacing from the aligned edge. Default: 0
belowOrigin	If true, the dropdown will show below the activator. Default: false
alignment	Defines the edge the menu is aligned to. Default: 'left'
stopPropagation	If true, stops the event propagating from the dropdown origin click handler. Default: false

To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.

<a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Click Here!</a>

jQuery Plugin

Initialization this plugin for your dropdown page, then dynamically displayed in mouseover dorpdown.

$('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left', // Displays dropdown with edge aligned to the left of button
      stopPropagation: false // Stops event propagation
    }
);

You can also open dropdowns programatically, the below code will make your modal open on document ready :

 $('.dropdown-button').dropdown('open');

You can also close dropdowns programatically :

$('.dropdown-button').dropdown('close');

Materialize CSS Tutorial