Font and theme export

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.

Dropdowns use Material 3 Expressive styling with rounded menu sections and theme-aware interaction states. Open a menu and use ↑ / ↓ to move between available items, Enter to activate an item, and Esc to close it. The keyboard focus indicator stays inside the item so it remains visible at the menu edges.

Use selected or aria-selected="true" on an item to show the current selection with a rounded tertiary highlight. Focus moves independently of selection. Mark unavailable items with disabled and aria-disabled="true"; disabled items and dividers are skipped by arrow-key navigation.

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() {
  const elems = document.querySelectorAll('.dropdown-trigger');
  const instances = 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 = Dropdown.init(elems, {
    // the dropdown is aligned to left
    alignment: 'left',
    // enabled for example to be visible
    constrainWidth: false,
  });
});

Nested Dropdowns

Put a dropdown-trigger inside a menu item and connect it to another dropdown-content using data-target. Initialize every trigger, including the nested ones. Submenus open on hover, click, or touch, and flip to the other side when there is not enough room.

Use → to enter a submenu, ← to return, and Esc to close one level. Left and right are reversed in right-to-left layouts. Choosing a final item closes the menu tree; opening a submenu keeps its parent open.

<button class="dropdown-trigger btn tonal" data-target="actions">Actions</button>
<ul id="actions" class="dropdown-content">
  <li>
    <button class="dropdown-trigger" data-target="export-options">Export</button>
    <ul id="export-options" class="dropdown-content">
      <li><a href="report.pdf">PDF</a></li>
      <li><a href="report.csv">CSV</a></li>
    </ul>
  </li>
</ul>
// Initialize root and nested triggers together.
Dropdown.init(document.querySelectorAll('.dropdown-trigger'));

Methods

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

const instance = 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.