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.
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
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
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.
Could you show the macro you’ve got after suggested changes?
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.

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