dropdown.html.twig

{% apply spaceless %}

{# Parameters:
  - id (string) (default: dropdown-random(1000))
  - trigger (link or button)
  - link (boolean) (default: false)
  - direction (string) (default: '')
    - options ['dropup', 'dropend', 'dropstart']
  - alignment (string) (default: '')
    - options [
      'dropdown-menu-end',
      'dropdown-menu-sm-end',
      'dropdown-menu-md-end',
      'dropdown-menu-lg-end',
      'dropdown-menu-xl-end',
      'dropdown-menu-xxl-end',
      'dropdown-menu-start',
      'dropdown-menu-sm-start',
      'dropdown-menu-md-start',
      'dropdown-menu-lg-start',
      'dropdown-menu-xl-start',
      'dropdown-menu-xxl-start'
    ]
  - dark (boolean) (default: false)
  - remove_wrapper (boolean) (default: false)
  - items (object[])
    format: [
      {
        - link or button object
        - active (boolean)
        - divider (bolean) - show divider
        - button (boolean) - set to button
      }
    ]
  - attributes (drupal attrs)
#}

{% set _id = id|default('dropdown-' ~ random(1000)) %}
{% set _trigger = trigger|default({}) %}
{% set _link = link ?? false %}
{% set _direction = direction|default('') %}
{% set _alignment = alignment|default('') %}
{% set _dark = dark ?? false %}
{% set _remove_wrapper = remove_wrapper ?? false %}
{% set _items = items|default([]) %}

{% set _class = 'dropdown' %}
{% set _dropdown_classes = ['dropdown-menu'] %}

{% if _dark %}
  {% set _dropdown_classes = _dropdown_classes|merge(['dropdown-menu-dark']) %}
{% endif %}
{% if _alignment %}
  {% set _dropdown_classes = _dropdown_classes|merge([_alignment]) %}
{% endif %}
{% if _direction %}
  {% set _class = _class ~ ' ' ~ _direction %}
{% endif %}

{% if attributes is empty %}
  {% set attributes = create_attribute() %}
{% endif %}

{% set attributes = attributes.setAttribute('aria-labelledby', _id).addClass(_dropdown_classes) %}

{% if _trigger.attributes is empty %}
  {% set _trigger = _trigger|merge({
    attributes: create_attribute()
  }) %}
{% endif %}
{% set _trigger = _trigger|merge({
  attributes: _trigger.attributes.addClass(['dropdown-toggle'])
                      .setAttribute('aria-expanded', 'false')
                      .setAttribute('data-bs-toggle', 'dropdown')
                      .setAttribute('id', _id)
}) %}

{% if _link %}
  {% set _trigger = _trigger|merge({
    attributes: _trigger.attributes.setAttribute('role', 'button') 
  }) %}
{% else %}
  {% set _trigger = _trigger|merge({
    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
  }) %}
{% endif %}

{% if not _remove_wrapper %}
<div class="{{ _class }}">
{% endif %}
  {% if _link %}
    {% include '@oe-bcl/bcl-link/link.html.twig' with _trigger only %}
  {% else %}
    {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
  {% endif %}
  <ul
    {{ attributes }}
  >
    {% if _items is not empty and _items is iterable %}
      {% for _item in _items %}
        {% if _item.attributes is empty %}
          {% set _item = _item|merge({
            attributes: create_attribute()
          }) %}
        {% endif %}
        {% set _item_classes = ['dropdown-item'] %}
        {% if _item.active %}
          {% set _item_classes = _item_classes|merge(['active']) %}
        {% endif %}
        {% set _item = _item|merge({
          clean_class: true,
          attributes: _item.attributes.addClass(_item_classes)
        }) %}
        <li>
        {% if _item.divider is defined %}
          <hr class="dropdown-divider">
        {% elseif _item.button is defined %}
          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
        {% else %}
          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
        {% endif %}
        </li>
      {% endfor %}
    {% endif %}
  </ul>
{% if not _remove_wrapper %}
</div>
{% endif %}

{% endapply %}