Dropdown

Use the function chi.dropdown(elem) to instantiate a new dropdown component in the DOM element passed as a parameter. You must use the trigger element as the parameter.

Element 1Element 2Element 3Element 4
<div class="m-dropdown">
  <button id="dropdown-1" class="a-btn m-dropdown__trigger">Dropdown, click me</button>
  <div class="m-dropdown__menu">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
    <a class="m-dropdown__menu-item" href="#">Element 4</a>
  </div>
</div>
<script>chi.dropdown(document.getElementById('dropdown-1'));</script>

Preventing memory leaks

Dropdown components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

var elem = document.getElementById('dropdown-3');
var dropdown = chi.dropdown(elem);
// do stuff
dropdown.dispose();

TipIt is safe to call the dropdown method more than once, as it will return any previously created dropdown component associated to the trigger.

var elem = document.getElementById('dropdown-4');
var dropdown = chi.dropdown(elem);
var elem2 = document.getElementById('dropdown-4');
var dropdown2 = chi.dropdown(elem2);
dropdown === dropdown2; // returns true

dropdown.dispose(); // Only have to do it once.