Active trail in menu

OchopOchop Member Posts: 1


We would need to have some css class on menu items to show the user where he is in our menu tree.

Example: When viewing a product detail page, the "Products" item at the first level should be highlighted. with a css class ".active" or something.

Any clue? Thanks!


  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 274 moderator

    Hi @Ochop

    This should be build into the theme but without the name of the theme or link to your shop it would be hard to troubleshoot.

    eCom Support Team
    Lightspeed HQ
  • akshayshahakshayshah Member Posts: 1
    edited March 2021

    I am new here but according to my finding you can apply the below condition to your categories :

    {% if category.url is active %} class="active"{% endif %}

    If you are having the menu only in that case you can add below code for your menu

    {% if link.url is active %} class ="active" {% endif %}

    also you can get the template name and put the condition in the menu for example,

    if that is the home you can check the template name and put the condition in the menu

    {% if template == 'pages/index.rain' %} class ="active" {% endif %}

    I hope, this will help others.

    Note : You need to add this code in the loop of menu where you are getting this objects.

    Post edited by akshayshah on
Sign In or Register to comment.