Unable to add active class to toolbar navigation

[rjtbansal]

Hi All,

I have the following code in Impulse theme within toolbar.liquid where I have toolbar_menu items and based on click I want to attach an active class. I have been trying to use link.current property to keep track but no class gets added upon inspection. Below is the code snippet within toolbar.liquid:

{% if section.settings.toolbar_menu != blank %}
        <div class="toolbar__item toolbar__item--menu">
          <ul class="inline-list toolbar__menu">
          {% for link in toolbar_menu.links %}
            <li>
            <a href="{{ link.url }}" {% if link.current %}aria-current="page" class="active" style="color:yellow;"{% endif %}>{{ link.title }}</a>
            </li>
          {% endfor %}
          </ul>
        </div>
      {% endif %}

Even though I click on the navigation items and the page opens, I dont see getting any class added. 

[shanu_solanki]

---

@rjtbansal wrote:

Hi All,

I have the following code in Impulse theme within toolbar.liquid where I have toolbar_menu items and based on click I want to attach an active class. I have been trying to use link.current property to keep track but no class gets added upon inspection. Below is the code snippet within toolbar.liquid:

{% if section.settings.toolbar_menu != blank %}
        <div class="toolbar__item toolbar__item--menu">
          <ul class="inline-list toolbar__menu">
          {% for link in toolbar_menu.links %}
            <li>
            <a href="{{ link.url }}" {% if link.current %}aria-current="page" class="active" style="color:yellow;"{% endif %}>{{ link.title }}</a>
            </li>
          {% endfor %}
          </ul>
        </div>
      {% endif %}

Even though I click on the navigation items and the page opens, I dont see getting any class added. 

<div class="">
   <ul class="menu">
      {% for link in linklists['main-menu'].links %}
        <li>
           <a href="{{ link.url }}" {% if link.current == true %}class="active" {% endif %}>{{ link.title }}</a>
        </li>
      {% endfor %}
    </ul>
</div>