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("DOMContentLoaded", function() {
dropdown.init();
});
</script>Configure the dropdown components with data attributes
- Add an
idto eachflix-dropdown__items-containerelement you wish to be managed by the plugin and initialize it with thehiddenattribute, so it's closed; - Connect the dropdown target to the list by passing the id to the target with
data-dropdown="<THE_ID>"attribute - Optionally ad an
idtoflix-dropdown__itemslist element (if it's not there, the plugin will generate it for you) - 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>
<div id="dropdown-menu" hidden class="flix-dropdown__items-container">
<ul 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>
</div>