JavaScript APIs

Dropdown Button

The JavaScript API for the Dropdown Button component.

The mod.dropdown_button() method automatically attaches event listeners for all <div class="mod-dropdown-button"></div> tags on the page and handles interaction events for the elements.

Method API

// Using mod(-plus).iife.min.js
window.mod.dropdown_button();

// Using mod(-plus).esm.min.js
import { dropdown_button } from 'path/to/mod(-plus).esm.min.js';
dropdown_button();

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Dropdown Button HTML

<div class="mod-dropdown-button">
  <button class="mod-button mod-button-icon-suffixed">Settings <i class="mod-icon-chevron-down"></i></button>
  <div class="mod-dropdown">
    <!-- Rest of HTML for dropdown... -->        
  </div>
</div>

Dropdown Button JavaScript

window.mod.dropdown_button();