Documentation of dropdowns and thiers variations.
Files
app/styles/modules/_dropdown.scss
Dropdown
Basic dropdown
Dropdown components usualy hides extended functionality behind action, which opens dropdowns. Dropdown is build with .dropdown
class. Expaneded state is set with aria-expanded="true"
attribute. Example of basic dropdown list is shown below. Example also contains basic usage with dropdown buttons.
Javascript dependency
Dropdown copmonent require:
Toggle javascript module:app/scripts/modules/Toggle.js
.
Initialized by default in: app/scripts/main.js
file.
Dropdown javascript module:app/scripts/modules/Dropdown.js
.
Initialized by default in: app/scripts/main.js
file.
<div class="dropdown" data-dropdown aria-expanded="false">
<a class="dropdown__item" href="#">...</a>
...
</div>
<!-- expanded -->
<div class="dropdown" data-dropdown aria-expanded="true">
Interactive dropdown
Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute [data-dropdown-interactive]
.
Note
Disable max height of dropdown with .dropdown--nowrap
class.
Note
Add padding to dropdown with .dropdown--space
class.
<div class="dropdown dropdown--nowrap dropdown--space" data-dropdown data-dropdown-interactive>
...
</div>