Europa Component Library

Dropdowns

Documentation • Demo 
<!-- Button dropdown -->

<div class="ecl-dropdown">
  {% include '@ec-europa/ecl-buttons' with {
    'label': 'Create',
    'extra_classes': 'ecl-expandable__button',
    'extra_attributes': [
      { 'name': 'aria-controls', 'value': 'example-button-dropdown'},
      { 'name': 'aria-expanded', 'value': 'false'},
      { 'name': 'id', 'value': 'example-expandable-button' },
      { 'name': 'type', 'value': 'button'},
    ]
  } %}
  {% include '@ec-europa/ecl-link-blocks' with {
    'extra_classes': 'ecl-dropdown__body',
    'extra_attributes': [
      { 'name': 'id', 'value': 'example-button-dropdown'},
      { 'name': 'aria-labelledby', 'value': 'example-expandable-button'},
      { 'name': 'aria-hidden', 'value': 'true'},
    ],
    'links': [
      { 'href': '#', 'label': 'European Commission' },
      { 'href': '#', 'label': 'Priorities' },
      { 'href': '#', 'label': 'Jobs, Growth and Investment' },
    ],
  } %}
</div>
 
{
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () { ECL.initExpandables(); });\n        ECL.dropdown('.ecl-dropdown');\n        "
  },
  "links": [
    {
      "target": "#",
      "title": "Article"
    },
    {
      "target": "#",
      "title": "Page"
    },
    {
      "target": "#",
      "title": "Community"
    }
  ]
}
 
<!-- Button dropdown -->

<div class="ecl-dropdown">

  <button class="ecl-button ecl-button--default ecl-expandable__button" aria-controls="example-button-dropdown" aria-expanded="false" id="example-expandable-button" type="button">Create</button>

  <div class="ecl-link-block ecl-dropdown__body" id="example-button-dropdown" aria-labelledby="example-expandable-button" aria-hidden="true">

    <ul class="ecl-link-block__list">
      <li class="ecl-link-block__item">

        <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#" id="example-button-dropdown" aria-labelledby="example-expandable-button" aria-hidden="true">European Commission</a>
      </li>
      <li class="ecl-link-block__item">

        <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#" id="example-button-dropdown" aria-labelledby="example-expandable-button" aria-hidden="true">Priorities</a>
      </li>
      <li class="ecl-link-block__item">

        <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="#" id="example-button-dropdown" aria-labelledby="example-expandable-button" aria-hidden="true">Jobs, Growth and Investment</a>
      </li>
    </ul>
  </div>
</div>
  • Content: 
    /**
 * `Node#contains()` polyfill.
 *
 * See: http://compatibility.shwups-cms.ch/en/polyfills/?&id=1
 *
 * @param {Node} node
 * @param {Node} other
 * @return {Boolean}
 * @public
 */

function contains(node, other) {
  // eslint-disable-next-line no-bitwise
  return node === other || !!(node.compareDocumentPosition(other) & 16);
}

export const dropdown = selector => {
  const dropdownsArray = Array.prototype.slice.call(
    document.querySelectorAll(selector)
  );

  document.addEventListener('click', event => {
    dropdownsArray.forEach(dropdownSelection => {
      const isInside = contains(dropdownSelection, event.target);

      if (!isInside) {
        const dropdownButton = document.querySelector(
          `${selector} > [aria-expanded=true]`
        );
        const dropdownBody = document.querySelector(
          `${selector} > [aria-hidden=false]`
        );
        // If the body of the dropdown is visible, then toggle.
        if (dropdownBody) {
          dropdownButton.setAttribute('aria-expanded', false);
          dropdownBody.setAttribute('aria-hidden', true);
        }
      }
    });
  });
};

export default dropdown;
  • URL: /components/raw/ecl-dropdowns/ecl-dropdowns.js
  • Filesystem Path: framework/components/ecl-dropdowns/ecl-dropdowns.js
  • Size: 1.2 KB
  • Content: 
    /**
 * ECL Dropdowns
 * @define dropdown
 */

.ecl-dropdown {
  margin: 0;
  position: relative;
}

// collapsed/open part of the dropdown
.ecl-dropdown__body {
  background-color: map-get($ecl-colors, 'grey-5');
  border: 1px solid #ccc rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  list-style: none;
  position: absolute;
  z-index: map-get($ecl-z-index, 'dropdown');
}
  • URL: /components/raw/ecl-dropdowns/ecl-dropdowns.scss
  • Filesystem Path: framework/components/ecl-dropdowns/ecl-dropdowns.scss
  • Size: 396 Bytes
  • Handle: @ec-europa/ecl-dropdowns
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-dropdowns/ecl-dropdowns.twig