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

{#
/**
 * @file
 * Template for a Bootstrap Nav component, an extension of Radix's Bootstrap nav
 *
 * It borrows from Radix's nav item but supports more than links as nav items:
 * if is_tabpanel is passed, it will render <button> elements instead.
 *
 * Available config:
 * - items: a render array of elements, each one will be wrapped on a <li>
 *   and can have the following values:
 *   - in_active_trail: wether the item is part of the active trail
 *   - is_expanded: wether the item is expanded (only if below is filled)
 *   - below: a render array of child elements following the same structure
 *   If is_tabpanel is true, the items array should instead include the
 *   following data:
 *   - title: the tab title
 *   - id: a unique id, shared with the tab pane
 * - alignment: left | right | center | vertical.
 * - style: tabs | pills
 * - fill: fill | justify
 * - classes: An array of utility classes.
 * - is_tabpanel: Wether this navigation is part of a JS-enabled tabbed
 *   interface
 */
#}

{% set component_base = 'nav' %}
{% set attributes = safe_create_attribute(attributes) %}

{% import _self as menus %}

{% if alignment == 'right' %}
  {% set alignment_class = 'justify-content-end' %}
{% elseif alignment == 'center' %}
  {% set alignment_class = 'justify-content-center' %}
{% elseif alignment == 'vertical' %}
  {% set alignment_class = 'flex-column' %}
{% else %}
  {% set alignment_class = '' %}
{% endif %}

{% set style = style ? 'nav-' ~ style : '' %}
{% set fill = fill ? 'nav-' ~ fill : '' %}

{%
  set merged_classes = [
    component_base,
    style,
    alignment_class,
    fill,
    is_tabpanel and alignment != 'vertical' ? 'mb-3'
  ] | merge(classes ? classes : [])
%}

{% if items %}
  <ul{{ attributes.addClass(merged_classes) }}>
    {% block items %}
      {% for item in items %}
        {% set nav_item_classes = [
          'nav-item',
          item.in_active_trail ? 'active',
          item.is_expanded and item.below ? 'dropdown'
        ] %}
        {% set nav_link_classes = ['nav-link'] %}

        {# Try to get the classes from the url property, if present #}
        {% if item.url %}
          {% if item.url.options.attributes.class is iterable %}
            {% set nav_link_classes = nav_link_classes|merge(item.url.options.attributes.class) %}
          {% elseif item.url.options.attributes.class %}
            {% set nav_link_classes = nav_link_classes|merge([item.url.options.attributes.class]) %}
          {% endif %}
        {% endif %}

        <li{{ create_attribute().addClass(nav_item_classes) }}>
          {% if item.is_expanded and item.below %}
            {{ link(item.title, item.url, { 'class': nav_link_classes|merge(['dropdown-bs-toggle']), 'data-bs-toggle': 'dropdown' }) }}
            {% if item.below %}
              {% include '@bootstrap_components_toolkit/bootstrap-button.html.twig' with {
                items: item.below
              } %}
            {% endif %}
          {% else %}
            {% if is_tabpanel %}
              <button{{ create_attribute({
                'class': nav_link_classes | merge(loop.index0 == 0 ? ['active'] : []),
                'id': item.id ~ '-tab',
                'data-bs-toggle': 'tab',
                'data-bs-target': '#' ~ item.id,
                'type': 'button',
                'role': 'tab',
                'aria-controls': 'home',
                'aria-selected': 'true'
              }) }}>{{ item.title }}</button>
            {% else %}
              {{ link(item.title, item.url, { 'class': nav_link_classes }) }}
            {% endif %}
          {% endif %}
        </li>
      {% endfor %}
    {% endblock %}
  </ul>
{% endif %}