QuillObjects
Linklist & Link
The linklist and link objects for navigation menus and dropdowns.
Menus are stored as linklists. Each one has a handle and a set of links. Links can be nested to build dropdowns.
Linklist properties
| Property | Type | Description |
|---|---|---|
linklist.id | number | The unique menu ID |
linklist.handle | string | The menu handle (e.g. main-menu) |
linklist.title | string | The menu title |
linklist.links | array | The top-level links |
Link properties
| Property | Type | Description |
|---|---|---|
link.title | string | The link text |
link.url | string | The URL the link points to |
link.type | string | The link type (see below) |
link.active | boolean | true if this link matches the current page |
link.links | array | Child links (for dropdown menus) |
link.visibility | string | Who can see this link: everyone, logged_in, logged_out, members_only |
link.badge_text | string | Badge text displayed on the link (e.g. "New") |
link.badge_color | string | Badge color value |
Link types
| Type | Description |
|---|---|
collection_link | Points to a collection |
product_link | Points to a product page |
page_link | Points to a static page |
blog_link | Points to a blog |
blog_post_link | Points to a specific blog post |
policy_link | Points to a policy page |
url_link | Points to an external or custom URL |
heading | A label that is not a link (used to group items) |
Building a navigation menu
{% assign main_menu = linklists['main-menu'] %}
<nav>
{% for link in main_menu.links %}
<a href="{{ link.url }}" {% if link.active %}class="active"{% endif %}>
{{ link.title }}
{% if link.badge_text %}
<span class="badge" style="background: {{ link.badge_color }}">
{{ link.badge_text }}
</span>
{% endif %}
</a>
{% if link.links.size > 0 %}
<ul class="dropdown">
{% for child in link.links %}
<li><a href="{{ child.url }}">{{ child.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</nav>Showing links by login state
Links can be set to show only for some visitors. Use the visibility field to check:
{% for link in main_menu.links %}
{% if link.visibility == 'logged_in' and customer == nil %}
{% continue %}
{% endif %}
{% if link.visibility == 'logged_out' and customer %}
{% continue %}
{% endif %}
{% if link.visibility == 'members_only' and customer.tier == 'standard' %}
{% continue %}
{% endif %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}Footer menu
{% assign footer_menu = linklists['footer'] %}
{% if footer_menu %}
<div class="footer-links">
{% for link in footer_menu.links %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
{% endif %}Accessing menus
Use the global linklists object to access any menu by its handle:
{% assign account_menu = linklists['account'] %}
{% assign mobile_menu = linklists['mobile'] %}