Dropdowns

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.

Example:

Code:

<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.

Example:

Code:

<div class="dropdown dropdown--nowrap dropdown--space" data-dropdown data-dropdown-interactive>
  ...
</div>