Materialize CSS
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>
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>
Output :
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.

      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 :


You can also close dropdowns programatically :


We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.