Dropdown Content - Materialize

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_module_four
_cloud_five

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