radix-8.x-4.2/src/components/nav/nav.twig

{#
/**
 * @file
 * Template for a Nav component.
 *
 * Available config:
 * - alignment: left | right | center | vertical.
 * - style: tabs | pills
 * - fill: fill | justify
 * - dropdown: true | false : wheather to show dropdowns or not.
 * - utility_classes: An array of utility classes.
 */
#}
{% import _self as menus %}

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

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

{% set nav_classes = [
  'nav',
  style,
  alignment,
  fill
  ]|merge(utility_classes ? utility_classes : [])
%}

{% if items %}
  <ul{{ attributes.addClass(nav_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'
        ]|merge(nav_item_utility_classes ? nav_item_utility_classes : [])
        %}
        {% set nav_link_classes = [
          'nav-link',
          ]|merge(nav_link_utility_classes ? nav_link_utility_classes : [])
        %}

        {% 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 %}

        <li{{ item.attributes.addClass(nav_item_classes) }}>
          {% if item.is_expanded and item.below and dropdown|default(true) %}
            <a href="{{ item.url }}" class="{{ nav_link_classes|merge(item.below ? ['dropdown-toggle' ] : [])|join(' ') }}" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">{{ item.title }}</a>
            {% if item.below %}
              {% include '@radix/dropdown/dropdown-menu.twig' with {
                items: item.below
              } %}
            {% endif %}
          {% else %}
            {{ link(item.title, item.url, { 'class': nav_link_classes }) }}
          {% endif %}
        </li>
      {% endfor %}
    {% endblock %}
  </ul>
{% endif %}