Dropdowns
Dropdowns are a javascript feature available thanks to an external library called a11y-dropdown-component.
Demo
The dropdowns are used along the application in order to collapse large, easy-readable menus for desktop devices, but too wordy for mobile devices.
This javascript feature is enhanced with a small css, through the naming: the hideable content MUST HAVE an id
starting with dropdown-menu.
The following example will not be noticeable in desktop, but mobile:
Usage
An dropdown requires two elements:
1. A user actionable element, with the data-attributes data-component="dropdown" data-target="dropdown-menu-element"
.
2. A hideable element, whose <code>id</code> matches the data-target value the trigger refers to.
Source code on GitHub: decidim-core/app/packs/src/decidim/a11y.js