bootstrap_components_toolkit-1.0.0/templates/bootstrap-dropdown.html.twig

{#
/**
 * @file
 * Template for Bootstrap Dropdown, an extension of Bootstrap Dropdown
 *
 * Available config:
 * - type: A valid bootstrap button type: 'outline' or FALSE to default.
 * - color: primary | secondary | success | danger | warning | info | light
 *   | dark
 * - size: A valid bootsptrap size value: 'lg' or 'sm'
 * - items: An array containing the elements of the dropdown, usually links.
 *   Up to Bootstrap 4 they needed to be links, nowadays they can also be
 *   <button> elements
 *   (see https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-items)
 * - title: The title of the dropdown
 * - url: An optional link for the title. It will affect the rendered HTML element.
 * - id: A unique identifier. This is optional for the toggle to work, but
 *   is recommended for a11y.
 * - direction: up | end | start
 * - offset: string of "x,y" coordinates
 * - auto_close: true | outside | inside | false
 */
#}

{% set component_base = 'dropdown' %}
{% set attributes = safe_create_attribute(attributes) %}
{%
  set merged_classes = [
    component_base,
    url ? 'btn-group',
    direction ? 'drop' ~ direction,
  ] | merge(classes ? classes : [])
%}

{%
  set dropdown_attributes = create_attribute({
    'data-bs-toggle' : 'dropdown',
    'data-bs-offset' : offset ? offset : "0,0",
    'data-bs-auto-close' : auto_close ? auto_close : 'true',
    'aria-expanded' : 'false',
    'id' : id,
    'class' : [
      'dropdown-toggle'
    ]
  })
%}

<div{{ attributes.addClass(merged_classes) }}>

  {# Main dropdown button #}
  {% embed "@bootstrap_components_toolkit/bootstrap-button.html.twig" with {
    color: color,
    size: size,
    type: type,
    url: url,
    attributes: url ? [] : dropdown_attributes,
  } %}
    {% block button_content %}
      {{ title }}
    {% endblock %}
  {% endembed %}

  {# Auxiliary dropdown button, only in case the main is a link #}
  {% if url %}

    {% embed "@bootstrap_components_toolkit/bootstrap-button.html.twig" with {
      color: color,
      size: size,
      type: type,
      url: url,
      classes: ['dropdown-toggle-split'],
      attributes: url ? dropdown_attributes : [],
    } %}
      {% block button_content %}
        <span class="visually-hidden">{{ 'Toggle Dropdown' | t }}</span>
      {% endblock %}
    {% endembed %}
  {% endif %}


  {% if items %}
    <ul class="dropdown-menu" aria-labelledby="{{ id }}">
      {% for item in items %}
        <li>
          {{ item }}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

</div>