menu

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!


  <!-- 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


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

  // Or with jQuery

  $('.dropdown-trigger').dropdown();
        

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:


    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.