How do I conditionally set active state in category navigation?

Question

Here is the code I am trying to use to set an active state for category navigation:

    {% for category in categories %}
        <li {% if craft.request.segment(2) == "{{ category.slug }}" %}class="active"{% endif %}><a href="{{ category.url }}">{{ category.title }}</a></li>
    {% 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.

Answer 1

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

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

You could also use ternary operators:

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

Answer 2

Small update for Craft3 in the syntax :

{% set categories = craft.categories().all() %}
{% nav category in categories %}
    <li class="nav-menu-item {{ craft.app.request.getSegment(2) == category.slug ? 'nav-menu-item-current' : '' }}{% endif %}">
        <a href="{{ category.url }}">{{ category.title }}</a>
    </li>
{% 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