<p><strong>Update</strong> Sorry, I originally thought you were building nav and just showing simplified code. If you just want to list the categories then this should work:</p>

<pre><code>{% nav category in categories %}
    {{- category.title -}}
    {% if not loop.last %}, {% endif %}
    {% children %}
{% endnav %}
</code></pre>

<p>If your trying to build a nav system, then this should work. In either case just place your 'loop' <em>before</em> the children tag. See <a href="https://craftcms.stackexchange.com/a/6966/784">this answer</a> for another example.</p>

<pre><code>&lt;ul id="nav"&gt;
    {% nav category in categories %}

        {% if loop.first %}
            &lt;li class="first"&gt;
        {% elseif loop.last %}
            &lt;li class="last"&gt;
        {% else %}
            &lt;li&gt;
        {% endif %}

            &lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;
            {% ifchildren %}
                &lt;ul&gt;
                    {% children %}
                &lt;/ul&gt;
            {% endifchildren %}
        &lt;/li&gt;
    {% endnav %}
&lt;/ul&gt;
</code></pre>

CC BY-SA 3.0
2015-02-05T14:33:09.477Z
Alas, in this case, my `loop` logic needs to come before the `{% children %}` tag.
Michael Rog
CC BY-SA 3.0
2015-02-05T14:34:04.050Z
(On the other hand, I suppose I could rearrange it to use `!loop.first` instead of `!loop.last`...)
Michael Rog
CC BY-SA 3.0
2015-02-04T19:02:59.763Z
2015-02-05T02:35:47.500Z
2017-04-13T12:51:00.253Z
Douglas McDonald
<p>I ended up solving this with a recursive <a href="http://twig.sensiolabs.org/doc/tags/macro.html" rel="nofollow">Twig macro</a>:</p>

<pre><code>{% macro catObj(category) %}
    ... blah ...
    {% if category.children | length %}
        {% for child in category.children %}
            {{ _self.catObj( child ) }}
            {% if not loop.last %},{% endif %}
        {% endfor %}
    {% endif %}
{% endmacro %}

{% for category in categories %}
    {{ _self.catObj( category ) }}
    {% if not loop.last %},{% endif %}
{% endfor %}
</code></pre>

<p>I appreciate Douglas and others pointing out that the <code>loop</code> variable is available in the <code>{% nav %}</code> tag <em>before the <code>{% children %}</code> tag</em>, but in this case it seemed like less work to use a macro than to jump through code-rearranging/variable-hoisting hoops.</p>

CC BY-SA 3.0
2015-02-05T02:24:10.203Z
I added another example that should do what you need much easier. Like I said, just put the 'loop' clause before the 'children' tag.
Douglas McDonald
CC BY-SA 3.0
2015-02-04T21:32:02.557Z
2015-02-04T21:32:02.557Z
Michael Rog
<p>I'm trying to use this code:</p>

<pre><code>{% nav category in categories %}

   {{ category.title }}

   {% children %}

   {% if not loop.last %} BLAH {% endif %}

{% endnav %}
</code></pre>

<p>It appears that the <code>{% if not loop.last %}</code> conditional doesn't work inside of a <code>{% nav %}</code> tag.</p>

<p>How can I target/style the first and last items in each level of a nav structure?</p>

<navigation><templating><loop>
How to target first or last item in a nav children loop
# How to target first or last item in a nav children loop

(Asked by: username_0 on 2015-02-04)

I'm trying to use this code:
{% nav category in categories %}

   {{ category.title }}

   {% children %}

   {% if not loop.last %} BLAH {% endif %}

{% endnav %}

It appears that the {% if not loop.last %} conditional doesn't work inside of a {% nav %} tag.
How can I target/style the first and last items in each level of a nav structure?

**Tags:** navigation, templating, loop


---

## 2 answers

### Answer by username_1 on 2015-02-04. Score: 5

Update Sorry, I originally thought you were building nav and just showing simplified code. If you just want to list the categories then this should work:
{% nav category in categories %}
    {{- category.title -}}
    {% if not loop.last %}, {% endif %}
    {% children %}
{% endnav %}

If your trying to build a nav system, then this should work. In either case just place your 'loop' before the children tag. See this answer for another example.

    {% nav category in categories %}

        {% if loop.first %}
            
        {% elseif loop.last %}
            
        {% else %}
            
        {% endif %}

            {{ category.title }}
            {% ifchildren %}
                
                    {% children %}
                
            {% endifchildren %}
        
    {% endnav %}

> **Comments:**
> **username_0**: Alas, in this case, my `loop` logic needs to come before the `{% children %}` tag.  
> **username_0**: (On the other hand, I suppose I could rearrange it to use `!loop.first` instead of `!loop.last`...)  

---

### Answer by username_0 on 2015-02-04. Score: 1

I ended up solving this with a recursive Twig macro:
{% macro catObj(category) %}
    ... blah ...
    {% if category.children | length %}
        {% for child in category.children %}
            {{ _self.catObj( child ) }}
            {% if not loop.last %},{% endif %}
        {% endfor %}
    {% endif %}
{% endmacro %}

{% for category in categories %}
    {{ _self.catObj( category ) }}
    {% if not loop.last %},{% endif %}
{% endfor %}

I appreciate Douglas and others pointing out that the loop variable is available in the {% nav %} tag before the {% children %} tag, but in this case it seemed like less work to use a macro than to jump through code-rearranging/variable-hoisting hoops.

> **Comments:**
> **username_1**: I added another example that should do what you need much easier. Like I said, just put the 'loop' clause before the 'children' tag.  

---

