templates/navigation/tabs.html.twig line 1

Open in your IDE?
  1. {% set dropdownOnMobile = true %}
  2. <ul class="nav {{ dropdownOnMobile ? 'd-md-flex d-none' : '' }} list-unstyled tabbing-animations-wrapper js-tabbing-animations-wrapper custom-scrollbar nav-tabs {{ className|default('') }}" {% if isTabbing|default(false) %}role="tablist"{% endif %}>
  3.     {% for tab in items|default([]) %}
  4.         <li class="nav-item js-tabbing-slider-nav-item">
  5.             <a class="nav-link js-tabbing-animations-link {{ tab.isActive ? 'js-tabbing-animations-link-active': '' }} {{ tab.isActive ? 'active': '' }} {{ isDynamicTabbing|default(false) ? 'js-dynamic-tabbing__toggle' : ''}}"
  6.                data-content-url="{{ tab.contentUrl }}"
  8.                 {% if tab.isActive %}aria-current="page"{% endif %}
  9.                 {% if tab.id is defined %}id="{{ tab.id }}"{% endif %}
  10.                 {% if isTabbing|default(false) %}
  11.                     href="#{{ tab.targetId }}"
  12.                     data-bs-toggle="tab"
  13.                     data-height="false"
  14.                     role="tab"
  15.                     aria-controls="{{ tab.targetId }}"
  16.                     aria-selected="{{ tab.isActive ? 'true': 'false' }}"
  17.                 {% else %}
  18.                     href="{{ tab.href }}"
  19.                 {% endif %}>
  20.                 {{ tab.text|raw }}
  21.             </a>
  22.         </li>
  23.     {% endfor %}
  24.     <div class="tabbing-animations-indicator js-tabbing-animations-indicator"></div>
  25. </ul>
  27. {% if dropdownOnMobile %}
  28.     {% set activeOption = ''  %}
  30.     <div class="dropdown mb-4 d-md-none js-tabbing-dropdown px-0">
  31.         <ul class="dropdown-menu nav tabbing-dropdown">
  32.             {% for tab in items|default([]) %}
  33.                 {% if tab.isActive %}
  34.                     {% set activeOption = tab.text|raw  %}
  35.                 {% endif %}
  36.                 <li class="dropdown-item nav-item p-0">
  37.                     <a class="nav-link tabbing-dropdown__item js-tabbing-dropdown__item {{ tab.isActive ? 'active': '' }} {{ isDynamicTabbing|default(false) ? 'js-dynamic-tabbing__toggle' : ''}}"
  38.                        data-content-url="{{ tab.contentUrl }}"
  40.                        {% if tab.isActive %}aria-current="page"{% endif %}
  41.                         {% if tab.id is defined %}id="{{ tab.id }}"{% endif %}
  42.                         {% if isTabbing|default(false) %}
  43.                         href="#{{ tab.targetId }}"
  44.                         data-bs-toggle="tab"
  45.                         data-height="false"
  46.                         role="tab"
  47.                         aria-controls="{{ tab.targetId }}"
  48.                         aria-selected="{{ tab.isActive ? 'true': 'false' }}"
  49.                     {% else %}
  50.                         href="{{ tab.href }}"
  51.                         {% endif %}>
  52.                         {{ tab.text|raw }}
  53.                     </a>
  54.                 </li>
  55.             {% endfor %}
  56.         </ul>
  58.         <button class="btn btn-outline dropdown-toggle js-tabbing-dropdown__active-item tabbing-dropdown__button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  59.             {{ activeOption }}
  60.         </button>
  61.     </div>
  62. {% endif %}