<ul>
  {% for link in linklists[YOUR_MENU_ID].links %}
    {% if link.links != blank %}
      <li>
        <a href="{{ link.url }}"{% if link.active %} class="active"{% endif %}>
          {{ link.title }}
          {% include ‘icon-arrow-down’ %}
        </a>
        <ul>
          {% for childlink in link.links %}
            <li>
              <a href="{{ childlink.url }}"{% if childlink.active %} class="active"{% endif %}>
                {{ childlink.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li>
        <a href="{{ link.url }}"{% if link.active %} class="active"{% endif %}>
          {{ link.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

Styling Shopify Active Links

This is useful when you want to style the current page menu link differently than the other links. Other CMS like WordPress & Drupal add this output by default, however styling Shopify active links requires you to check the link.active property in a linklist in your liquid template code.

Styling active menu links with `link.active`

The link.active property returns true if the link object is active, or false if the link object is inactive.

A link is considered active if the resource it points to is part of the URL structure. For example, if the current page is /blogs/news/snowfall, then the following links are active:

/blogs/news, where the resource is the blog
/blogs/news/snowfall, where the resource is the blog article

Given the behavior of link.active, multiple links in a menu can have link.active be true at the same time, even when they have different values for link.url.

The link.active property is useful for menu designs that highlight when top-level navigation categories are being viewed. An example of this would be a menu that highlights the “News” blog link when an article from that blog is being read.

If you’re on a collection page that’s filtered with tags, then a link that points to the unfiltered collection page still returns true for link.active. For example, if the URL is collections/men/boots, then the following links are active:

collections/men, where the resource is the collection
collections/men/boots, where the resource is the filtered collection

If you’re on a product page that’s collection-aware, then link.active returns true for both the collection-aware product URL and the collection-agnostic URL. For example, if the URL is /products/awesome-product, then the following links are active:

/products/awesome-product
/collections/awesome-collection/products/awesome-product
/collections/all/products/awesome-product

For more information on styling Shopify active links, see the link object documentation.

1 comment on “Styling Shopify Active Links”.

Jean-Christophe Chouinard

# Aug 12, 2019

Thansk for the great tip. Your knowledge is super-extensive. I’ve learned a lot since I started following your blog

Join the conversation. Nevermind.

All comments posted on 'Styling Shopify Active Links' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

Styling Shopify Active Links