Add a dropdown list to any button. Make sure that the data-target 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.

Drop Me!

• one
• two
• three
• view_modulefour
• cloudfive

          Copied!
          content_copy
          
  <!-- Dropdown Trigger -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
          
        

Initialization

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

  // Or with jQuery

  $(document).ready(function(){
    $('.dropdown-trigger').dropdown({
      // specify options here
    });
  });
          
        

Options

Name	Type	Default	Description
alignment	String	'left'	Defines the edge the menu is aligned to.
autoTrigger	Boolean	true	If true, automatically focus dropdown el for keyboard.
constrainWidth	Boolean	true	If true, constrainWidth to the size of the dropdown activator.
container	Element	null	Provide an element that will be the bounding container of the dropdown.
coverTrigger	Boolean	true	If false, the dropdown will show below the trigger.
closeOnClick	Boolean	true	If true, close dropdown on item click.
hover	Boolean	false	If true, the dropdown will open on hover.
inDuration	Number	150	The duration of the transition enter in milliseconds.
outDuration	Number	250	The duration of the transition out in milliseconds.
onOpenStart	Function	null	Function called when dropdown starts entering.
onOpenEnd	Function	null	Function called when dropdown finishes entering.
onCloseStart	Function	null	Function called when dropdown starts exiting.
onCloseEnd	Function	null	Function called when dropdown finishes exiting.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

              Copied!
              content_copy
              
    var instance = M.Dropdown.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.dropdown-trigger').dropdown('methodName');
      $('.dropdown-trigger').dropdown('methodName', paramName);
    */
              
            

.open();

Open dropdown.

  instance.open();
        

.close();

Close dropdown.

  instance.close();
        

.recalculateDimensions();

While dropdown is open, you can recalculate its dimensions if its contents have changed.

  instance.recalculateDimensions();
        

.destroy();

Destroy plugin instance and teardown

  instance.destroy();
        

Properties

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
id	String	ID of the dropdown element.
dropdownEl	Element	The DOM element of the dropdown.
isOpen	Boolean	If the dropdown is open.
isScrollable	Boolean	If the dropdown content is scrollable.
focusedIndex	Number	The index of the item focused.