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

Solved
Highlighted
New Member
2 0 0

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.

Screenshot 2020-08-02 at 13.13.11.png

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

0 Likes
Highlighted
Astronaut
1083 178 213

This is an 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.
 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Astronaut
1083 178 213

Np, my pleasure! Wishing you a good week.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes