Drupal 8 How can I give dropdown links a class?

Question

I'm trying to build a simple dropdown menu on drupal 8 by using twig templates. My problem is that I can't find a way to give the dropdown links a class. Here's my code

{#
/**
 * @file
 * Theme override to display a menu.
 */
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0, menu_name) }} {# 1. #}

{% macro menu_links(items, attributes, menu_level, menu_name) %} {# 1. #}
  {% import _self as menus %}
  {# 1. #}
  {%
     set menu_classes = [
       'c-menu-' ~ menu_name|clean_class,
     ]
 %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('navbar-nav u-header__navbar-nav') }}>
    {% else %}
      <ul class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-offset animated">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          menu_level ? 'dropdown-item u-header__sub-menu-list-item' : 'nav-item u-header__nav-item',
          item.is_expanded ? 'menu-item',
          item.is_collapsed ? 'menu-item',
          item.in_active_trail ? 'active',
          item.below ? 'nav-item hs-has-sub-menu u-header__nav-item hs-sub-menu-opened',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }} data-event="hover" data-animation-in="fadeInUp" data-animation-out="fadeOut">
        {%
          set link_classes = [
            not menu_level ? 'nav-link u-header__nav-link',
            item.in_active_trail ? 'active',
            item.below ? 'nav-link u-header__nav-link',
            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
          ]
        %}
        {% if item.below %}
          {{ link(item.title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% else %}
          {{ link(item.title, item.url, {'class': link_classes}) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

I just need to give a class to {{ menus.menu_links(item.below, attributes, menu_level + 1) }} completely independent from its parents. Is there a way to achieve it? My output is like this

<a href="/" data-drupal-link-system-path="<front>" class="is-active">Sublink</a>

I need to change it like this

<a href="/" data-drupal-link-system-path="<front>" class="nav-link u-header__sub-menu-nav-link">Sublink</a>

If there's any other way to do so like with custom module or with hooks, please let me know

Areg Areg · Accepted Answer · 2019-05-14T07:19:30

Achieved the result with following code

{#
/**
 * @file
 * Theme override to display a menu.
 */
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0, menu_name) }} {# 1. #}

{% macro menu_links(items, attributes, menu_level, menu_name) %} {# 1. #}
  {% import _self as menus %}
  {# 1. #}
  {%
     set menu_classes = [
       'c-menu-' ~ menu_name|clean_class,
     ]
 %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('navbar-nav u-header__navbar-nav') }}>
    {% else %}
      <ul class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-offset animated">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          menu_level ? 'dropdown-item u-header__sub-menu-list-item' : 'nav-item u-header__nav-item',
          item.is_expanded ? 'expanded',
          item.is_collapsed ? 'collapsed',
          item.in_active_trail ? 'active',
          item.below ? 'nav-item u-header__nav-item expanded nav-item hs-has-sub-menu u-header__nav-item',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }} data-event="hover" data-animation-in="fadeInUp" data-animation-out="fadeOut">

        {%
        set link_classes = [
        'nav-link',
        not menu_level ? 'u-header__nav-link' : 'u-header__sub-menu-nav-link',
        item.in_active_trail ? 'active',
        item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
        ]
        %}
        {% if item.below %}
          {% set title %}
          {{ item.title }}<span class="fa fa-angle-down u-header__nav-link-icon"></span>
          {% endset %}

          {{ link(title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' })}}

          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% else %}
          {{ link(item.title, item.url, {'class': link_classes}) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}

{% endmacro %}

Drupal 8 How can I give dropdown links a class?

1 Answers