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


      <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element">
  Trigger
</button>

<ul id="dropdown-menu-element">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>