Color Scheme

Dropdown

Materialize is a modern responsive CSS framework based on Material Design by Google.

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 an empty li element and a divider class. You can also add icons. Just add the icon inside the anchor tag.

Drop Me! 
          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() {
  const elems = document.querySelectorAll('.dropdown-trigger');
  const instances = M.Dropdown.init(elems, {
    // 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.

Examples

Left DropDown!
Right DropDown! 

document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.dropdown-trigger')[0];
  const instances = M.Dropdown.init(elems, {
    // the dropdown is aligned to left
    alignment: 'left',
    // enabled for example to be visible
    constrainWidth: false,
  });
});

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

              Copied!
              content_copy
              const instance = M.Dropdown.getInstance(elem);
.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.