Limit menu entries to 4 per column with {% for %}

[crusco]

I'm trying to achieve this in my menu:

I've a menu with unknown number of entries... I need every 4th entry to break and go in a new column.

I've tried with {% cycle %} but it doesn't work like expected.

{% for link in linklists.footer.links %}
{% cycle '<c><ul class="no-style">','','','','' %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% cycle '','','','','</ul></c>' %} 
{% endfor %}

{% cycle %} code above OUTPUTS:

<grid>
<c><ul class="no-style">
	<li><a href="/pages/contact"  class="no-style">Contact</a></li>
	<li><a href="/pages/faq"  class="no-style">FAQ</a></li>
	<li><a href="/pages/shipping"  class="no-style">Shipping</a></li>
	<li><a href="/pages/returns"  class="no-style">Returns</a></li>
</ul></c> 
<c><ul class="no-style">
	<li><a href="/pages/about"  class="no-style">Our story</a></li>
	<li><a href="/blogs/news"  class="no-style">Press</a></li> <!-- Last link in menu -->
<!-- HERE it lacks the closing tag: </ul></c> -->

I've also tried with forloop.index, and it didn't work either.

{% for link in linklists.footer.links %}
{% if forloop.index == 5 %}
<c><ul class="no-style">
{% endif %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% if forloop.index == 5 %}
</ul></c>
{% endif %}
{% endfor %}

NOTE: I've css grid already set up... I need it set up thru liquid

[diego_ezfy · Accepted solution]

Hey,

Use modulo, aka mod in Javascript and other programming languages. If you're not sure what it is here is further information.

Basically it is the remainder or signed remainder after a division, So, for example:

2/2 the mod is 0.
3/2 the mod is 1.
And so on and so forth. 

Here is a sample:

    {% assign words = "cheddar, swiss, gouda, havarti, string, cookie, llama, loop" | split: ','%}
    <ul>
      {% for word in words %}
      {% assign mod = forloop.index | modulo: 4 %}
      <small> Current mod: {{mod}}</small>
      {% if mod == 0 %}
      <li>new column here.</li>
      {% else %}
      <li>{{word}}</li>
      {% endif %}

      {% endfor %}
    </ul>

What this code does is divide the current loop index by 4 since you want to add logic to the 4th entry. 

Let me know whether it works for you.
 

[crusco]

Awesome, thanks bro. Didn't know the modulo thing existed in liquid as well. It works 🤟

[diego_ezfy]

Np, my pleasure! Wishing you a good week.

[AvidBrio]

you can also  use limit:4

{% for link in linklists.footer.links limit:4 %}
{% cycle '<c><ul class="no-style">','','','','' %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% cycle '','','','','</ul></c>' %} 
{% endfor %}