0

I have a need to have the sub menu not be a nested item in the main level menu li's.

I'm not sure my approach is the best, but it is working with a couple caveats:

  1. The div <div class="r-sub-menu-wrapper"> gets rendered a second time and is empty.
  2. More importantly, I am unable to use .removeClass() on the item.below attributes to remove the ulClasses classes from the sub level menu.

My main concern is to remove that class from the sub level menu.

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}

  {% if items %}

      {% set ulClasses = [
        'menu',
        'o-menu',
        'o-menu-main',
      ] %}

      <ul{{ attributes.addClass(ulClasses) }}>
        {% for item in items %}
        {%
          set classes = [
            'menu-item',
            'o-menu-main__item',
            item.is_expanded ? 'menu-item--expanded',
            item.is_collapsed ? 'menu-item--collapsed',
            item.in_active_trail ? 'menu-item--active-trail',
            item.below ? 'menu-item--has-children',
            item.in_active_trail ? 'menu-item--active-item',
          ]
        %}
        <li{{ item.attributes.addClass(classes) }}>
          {{ link(item.title, item.url) }}
        </li>
      {% endfor %}
      </ul>

      {% set SubUlClasses = [
        'menu',
        'o-menu',
        'o-menu-sub',
      ] %}

      <div class="r-sub-menu-wrapper">
      <div class="r-sub-menu-inner">
      {% for item in items %}
        {{ menus.menu_links(item.below, attributes.removeClass(ulClasses).addClass(SubUlClasses), menu_level + 1, { class: ['o-menu-main__item'] }) }}
      {% endfor %}
      </div>
      </div>


  {% endif %}
{% endmacro %}

I am unsure about this approach as I've never done it before, but the need is there.

How can I have my sub level menu outside the top level li's, and be able to remove the classes already added to the attributes array in the top level ul?

Note: I have also tried using if statements to check if the menu_level is != 0, but have had issues where the sub menu does not render outside the top level ul.

  • It looks like at a glance you are not using item.below to render children, taking advantage of the macro recursion. I’m on my phone atm so I can’t paste a code snippet. – Kevin Jul 23 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.