Split menu in 2 ul with specific classes

Archive
1

Hello,

I want to split my main navigation in 2 ul with specific classes.

I managed to split my navigation :

    {% for pages in pages.children.visible |batch(pages.children.visible|length / 2) %}
        <ul>
            {% for page in pages %} 
                <li>
                    <a href="{{ page.url }}">{{ page.menu }}</a>
                </li>
            {% endfor %}
        </ul>
    {% endfor %}

This is the ouput :

<nav id="header-nav">
    <ul>
        <li>
            <a href="">Item1</a>
        </li>
        <li> 
            <a href="">Item2</a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="">Item3</a>
        </li>
    </ul>
</nav>

For now, for the css part I do it this way: ul:first-child and ul:nth-child(2), but how could I add a specific class to each ul ?

Thanks in advance. :slight_smile:

2

Well, I found a solution :

    {% for pages in pages.children.visible |batch(pages.children.visible|length / 2) %}

          {% if loop.index == 1 %}
            <ul class="header-nav-left">
                {% for page in pages %} 
                    <li>
                        <a href="{{ page.url }}">{{ page.menu }}</a>
                    </li>
                {% endfor %}
            </ul>
          {% else %}
            <ul class="header-nav-right">
                {% for page in pages %} 
                    <li>
                        <a href="{{ page.url }}">{{ page.menu }}</a>
                    </li>
                {% endfor %}
            </ul>
          {% endif %}
    {% endfor %}

Is it OK ?
Because on the twig documentation I read this :

Using the loop variable within the condition is not recommended as it will probably not be doing what you expect it to. For instance, adding a condition like loop.index > 4 won’t work as the index is only incremented when the condition is true (so the condition will never match).

I’m not a native speaker, so I’m not sure if I can use it like this or not…
If anyone could enlighten me, I would be really grateful ! :slight_smile: