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:
link.active
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 collectioncollections/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
link.child_active
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
link.current
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 parameterslink.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.
link.child_current
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
link.levels
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
link.links
Returns an array of the child links associated with the parent link.
link.object
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
link.title
Returns the title of the link.
link.type
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
link.url
Returns the URL of the link.