<p>You don't need the quotes or braces in twig tags to reference variables.</p>

<pre><code>{% for category in categories %}
    &lt;li {% if craft.request.segment(2) == category.slug %}class="active"{% endif %}&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
{% endfor %}﻿
</code></pre>

<p>You could also use ternary operators:</p>

<pre><code>{% for category in categories %}
    &lt;li {{ craft.request.segment(2) == category.slug ? 'class="active"' : "" }}&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
{% endfor %}﻿
</code></pre>

CC BY-SA 3.0
2014-07-22T16:00:34.913Z
What if I wanted to set class based on the url having no segment 2?
jeff_nordstedt
CC BY-SA 3.0
2014-07-22T16:09:34.093Z
I haven't tried it, but you could try using twig's default filter: `craft.request.segment(2)|default("")`
Bryan Redeagle
CC BY-SA 3.0
2014-07-22T16:10:18.170Z
Actually, I guessed and answered my own follow up by replacing "category.slug" with "null" to set class when no category is selected.
jeff_nordstedt
CC BY-SA 3.0
2014-07-22T15:31:20.250Z
2014-07-22T15:31:20.250Z
Bryan Redeagle
<p>Small update for Craft3 in the syntax :</p>

<pre><code>{% set categories = craft.categories().all() %}
{% nav category in categories %}
    &lt;li class="nav-menu-item {{ craft.app.request.getSegment(2) == category.slug ? 'nav-menu-item-current' : '' }}{% endif %}"&gt;
        &lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;
    &lt;/li&gt;
{% endnav %}
</code></pre>

<p>PS. Is there any other way to achieve this ? Going through craft.app is apparently frowned upon : <a href="https://docs.craftcms.com/v3/templating/global-variables.html#craft-app" rel="nofollow noreferrer">https://docs.craftcms.com/v3/templating/global-variables.html#craft-app</a></p>

CC BY-SA 4.0
2018-05-30T21:32:24.047Z
2018-05-30T21:32:24.047Z
fdelaneau
<p>I use the current <code>entry</code> as something to compare against, instead of the <code>craft.app.request….</code> Also one can also use the id instead of the slug. So here, based on the previous examples a little variation:</p>

<pre><code>{% set categories = craft.categories().all() %}
{% nav category in categories %}
    &lt;li class="nav-menu-item {{ entry.id == category.id ? 'nav-menu-item-current' : '' }}{% endif %}"&gt;
        &lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;
    &lt;/li&gt;
{% endnav %}
</code></pre>

<p>Example untested. Please correct me, if wrong.</p>

CC BY-SA 4.0
2020-02-20T15:34:18.850Z
2020-02-20T15:34:18.850Z
Frank Lämmer
<p>Here is the code I am trying to use to set an active state for category navigation:</p>

<pre><code>    {% for category in categories %}
        &lt;li {% if craft.request.segment(2) == "{{ category.slug }}" %}class="active"{% endif %}&gt;&lt;a href="{{ category.url }}"&gt;{{ category.title }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}﻿
</code></pre>

<p>It seems that the conditional can't check against the category.slug output. Is this the case? What would be a better approach?</p>

<p>Any help is appreciated.</p>

<templating><categories><conditional>
How do I conditionally set active state in category navigation?
# How do I conditionally set active state in category navigation?

(Asked by: username_0 on 2014-07-22)

Here is the code I am trying to use to set an active state for category navigation:
    {% for category in categories %}
        {{ category.title }}
    {% endfor %}﻿

It seems that the conditional can't check against the category.slug output. Is this the case? What would be a better approach?
Any help is appreciated.

**Tags:** templating, categories, conditional


---

## 3 answers

### Answer by username_1 on 2014-07-22. Score: 2 | Accepted answer

You don't need the quotes or braces in twig tags to reference variables.
{% for category in categories %}
    {{ category.title }}
{% endfor %}﻿

You could also use ternary operators:
{% for category in categories %}
    {{ category.title }}
{% endfor %}﻿

> **Comments:**
> **username_0**: What if I wanted to set class based on the url having no segment 2?  
> **username_1**: I haven't tried it, but you could try using twig's default filter: `craft.request.segment(2)|default("")`  
> **username_0**: Actually, I guessed and answered my own follow up by replacing "category.slug" with "null" to set class when no category is selected.  

---

### Answer by username_2 on 2018-05-30. Score: 1

Small update for Craft3 in the syntax :
{% set categories = craft.categories().all() %}
{% nav category in categories %}
    
        {{ category.title }}
    
{% endnav %}

PS. Is there any other way to achieve this ? Going through craft.app is apparently frowned upon : https://docs.craftcms.com/v3/templating/global-variables.html#craft-app


---

### Answer by username_3 on 2020-02-20. Score: 1

I use the current entry as something to compare against, instead of the craft.app.request…. Also one can also use the id instead of the slug. So here, based on the previous examples a little variation:
{% set categories = craft.categories().all() %}
{% nav category in categories %}
    
        {{ category.title }}
    
{% endnav %}

Example untested. Please correct me, if wrong.


---

