The link object

The link object cannot be invoked on its own. It must be invoked inside a linklist.

The link object has the following attributes:

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.

More examples

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

Similar to link.active, but returns true if a child link of the parent link is active, or false if no child links of the parent link are active.

This example shows the Liquid code and output for when the "Montreal" page is being viewed on a website. The example website has a the following main menu structure:

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

Input

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_active: {{ link.child_active }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_active: {{ sub_link.child_active }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: active: {{ sub_sub_link.active }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Output

Main Menu

Home: child_active: false
About Us: child_active: true
  In the news: child_active: false
  Locations: child_active: true
    Montreal: active: true
    Ottawa: active: false

Returns true if the page content associated with the link is considered a match to the current page. Returns false if the content isn't considered a match.

The following example shows the Liquid code and output for when the /collections/winter page is being viewed. The example website has a linklist with the following three links:

  • Summer collection, /collections/summer
  • Winter collection, /collections/winter
  • All products, /collections/all

Input

{% for link in linklists.main.links %}
  <a href="{{ link.url }}"
    {% if link.current %}aria-current="page" class="highlight"{% endif %}
  >
   {{ link.title }}
  </a>
{% endfor %}

Output

<a href="/collections/summer">Summer collection</a>
<a href="/collections/winter" aria-current="page" class="highlight">Winter collection</a>
<a href="/collections/all">All products</a>

The link.current property doesn't identify exact URL matches between the current page’s URL and a link.url value. There are two important behaviors to be aware of:

  • link.current ignores URL parameters
  • link.current treats product URLs and collection-aware product URLs as matching page content

Ignoring URL parameters

If the current page URL is /collections/winter?sort_by=price_ascending, then link.current is true for a link with a link.url of /collections/winter.

This behavior is useful because a collection link that's highlighted in a menu should remain highlighted after the collection is reordered.

Handling collection-aware product URLs

If the current page URL is /products/wool-gloves, then link.current returns true on the following link objects:

  • /collections/gloves/products/wool-gloves
  • /products/wool-gloves

This behavior is useful for reliably identifying when a product that's currently being viewed is in a menu. The content of the product page is often largely the same regardless of whether the link is collection-aware.

Returns true if a child link has a link object with link.current equal to true. Returns false if no child links have a link object with link.current equal to true.

This example shows the Liquid code and output for when the "Montreal" page is being viewed on a website. The example website has a the following main menu structure:

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

Input

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_current: {{ link.child_current }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_current: {{ sub_link.child_current }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: current: {{ sub_sub_link.current }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Output

Main Menu

Home: child_current: false
About Us: child_current: true
  In the news: child_current: false
  Locations: child_current: true
    Montreal: current: true
    Ottawa: current: false

Returns the number of nested levels that a link contains.

For example, given the following main menu structure:

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

The following Liquid code:

{% assign menu = linklists.main-menu %}

{{ menu.title }}: {{ menu.levels }}
{% for link in menu.links %}
  {{ link.title }}: {{ link.levels }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: {{ sub_link.levels }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: {{ sub_sub_link.levels }}
    {% endfor %}
  {% endfor %}
{% endfor %}

produces the following output (edited for space):

Main Menu: 3
  Home: 0
  About Us: 2
    Locations: 1
      Montreal: 0
      Ottawa: 0

Returns an array of the child links associated with the parent link.

Returns the variable associated to the link. The possible types are:

Through link.object, you can access any of the attributes that are available in the above three variables.

Input

<!-- If the product links to a product with a price of $10 -->
{{ link.object.price | money }}

Output

$10

Returns the title of the link.

Returns the type of the link. The possible values are:

  • blog_link: if the link points to a blog
  • catalog_link: if the link points to the catalog page /collections/all
  • collection_link: if the link points to a collection
  • collections_link: if the link points to the collection list page /collections
  • frontpage_link: if the link points to the home page /
  • http_link: if the link points to an external web page, or a type or vendor collection (ex: /collections/types?q=Pants)
  • page_link: if the link points to a page
  • policy_link: if the link points to a policy page /policies
  • product_link: if the link points to a product page
  • search_link: if the link points to the search page /search

Returns the URL of the link.