Add active class to the currently selected category archive page in Jekyll

Question

I am using category-archive plugin for my Jekyll project. I want to have a category list menu for each category archive page so the user can navigate between different category archives. I would like to add class="active" to the category list link for the category archive page currently viewed. I have something similar going for the site navigation by comparing the page.url to navitem.url the difference is that for the site nav i specify the list of navitem.urls in config.yml and for the category archive the list of category names is generated based on the categories specified in the post itself, and i am having trouble using the {{ category | first }} variable within the {% if %} operator so i could either check for "==" or "contains"

This is what i have at the moment but it doesn't seem to work

<ul class="product-categories">
{% for category in site.categories %}
  {% if page.url == {{ category | first }} %}
    {% assign class = "active" %}
  {% else %}
    {% assign class = "" %}
  {% endif %}
<li>
  <a href="/{{ category | first }}/" class="{{ class }}">{{ category | first }}</a>
</li>
{% endfor %}

Please help =)

marcanuy marcanuy · Accepted Answer · 2017-01-04T11:54:18

The class liquid variable is inside the for loop so when you use it outside the scope is empty, also it should be "contains" instead of == because the path contains more characters that won't be present in the category of.

<ul class="product-categories"> 
{% assign class = "" %}
{% for category in site.categories %}
{% assign cat=category|first %} 
{% if page.url contains cat %}
 {% assign class = "active" %} 
{% endif %} 
<li> 
<a href="/{{ category | first }}/" class="{{ class }}">{{ category | first }}</a>
 </li> 
{% endfor %}

Add active class to the currently selected category archive page in Jekyll

1 Answers