Skip to main contentSkip to site searchSkip to component search
Honeycomb

Dropdown

Dropdown plugin will handle the aria attributes and class modifiers for managing dropdowns.

Dropdown plugin will handle the aria attributes and class modifiers for managing dropdowns.

Add the plugin to your page:

Include the plugin from our CDN at the end of your page and then initialize it with:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/dropdown.js"></script>
<script>
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    dropdown.init();
  });
</script>

Configure the dropdown components with data attributes

  1. Add an id to each flix-dropdown__items element you wish to be managed by the plugin and initialize it with the hidden attribute, so it's closed;
  2. Connect the dropdown target to the list by passing the id to the target with data-dropdown="<THE_ID>" attribute
  3. Optionally you can configure if the dropdown is shown on click or hover by passing data-event="click|hover" to the target
<div class="flix-dropdown">
  <button type="button" class="flix-btn" data-dropdown="dropdown-menu">
    Open dropdown
  </button>
  <ul id="dropdown-menu" hidden="" class="flix-dropdown__items">
    <li class="flix-dropdown__item">
      <a class="flix-dropdown__link" href="#">
        Link 1
      </a>
    </li>
    <li class="flix-dropdown__item">
      <a class="flix-dropdown__link" href="#">
        Link 2
      </a>
    </li>
    <li class="flix-dropdown__item">
      <a class="flix-dropdown__link" href="#">
        Link 3
      </a>
    </li>
  </ul>
</div>