Down arrow in main menu only

1

Hello there

I’m trying to make a navigation menu with jquery dropotron library, and I’d like show the down arrow only in top level items. This is my code in macros.html.twig:

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set dropdown_angle_down = "submenu fa-angle-down" %}
    <li>
      <a {% if p.routable != false %}href="{{ p.url }}"{% else %}{% endif %}{% if p.children.visible.count > 0 %} class="{{ dropdown_angle_down }}"{% else %}{% endif %}>
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

With this code, the down arrow is applied to all pages with children, but I don’t know all options of page collections to limit, in this case, a style class to top level pages.

Can anyone help me to get this?

Thanks.

2

Maybe you could add some default level value to a macro, eg. {% macro nav_loop(page, level = 1) %} and then use it in your condition - level == 1 :thinking: And call deeper level with {{ macros.nav_loop(p, level++) }}

Disclaimer: didn’t check the syntax, so might be a bit wrong, but you should get the idea

3

Hi @Karmalakas

I’ve tested your suggestion but I’m not able to get the desired result.

I’d like to get this:

<nav id="nav">
  <ul>				
    <li><a href="index.html">Home</a></li>					
      <li>						
        <a href="#" class="submenu fa-angle-down">Page Layouts</a>
           <ul>
              <li><a href="left-sidebar.html">Left Sidebar</a></li>
              <li><a href="right-sidebar.html">Right Sidebar</a></li>
              <li><a href="no-sidebar.html">No Sidebar</a></li>
                 <li>
                    <a href="#">Submenu</a>
                       <ul>
                          <li><a href="#">Option One</a></li>
                          <li><a href="#">Option Two</a></li>
                          <li><a href="#">Option Three</a></li>
                       </ul>
                 </li>
           </ul>
      </li>
  </ul>
</nav>

However, my result is:

<nav id="nav">
  <ul>				
    <li><a href="index.html">Home</a></li>					
      <li>						
        <a class="submenu fa-angle-down">Page Layouts</a>
           <ul>
              <li><a href="left-sidebar.html">Left Sidebar</a></li>
              <li><a href="right-sidebar.html">Right Sidebar</a></li>
              <li><a href="no-sidebar.html">No Sidebar</a></li>
                 <li>
                    <a class="submenu fa-angle-down">Submenu</a>
                       <ul>
                          <li><a href="#">Option One</a></li>
                          <li><a href="#">Option Two</a></li>
                          <li><a href="#">Option Three</a></li>
                       </ul>
                 </li>
           </ul>
      </li>
  </ul>
</nav>

In second Submenu, the class submenu fa-angle-down must be empty.
I need indentify the first level of parent to apply that class only to level 0 items.

4

Could you show the macro you’ve got after suggested changes?

5

I finally got the code that shows the result I want. It is the following (macros.html.twig file):

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    <li> 
      <a {% if p.routable != false %}href="{{ p.url }}"{% else %}{% endif %}{% if p.children.visible.count > 0 and loop.length > loop.index %} class="submenu fa-angle-down"{% else %}{% endif %}>
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

I’ve included the loop.index condition to get the result I wanted.

Thanks for your help, anyway.

vokoscreenNG-2022-03-21_13-02-08

6

Was thinking about loop.index, but thought in macro the index resets. Good to know it doesn’t