Skip to content

Instantly share code, notes, and snippets.

@shopifypartners
Last active December 2, 2022 08:50
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save shopifypartners/1bf99d0e7227c1d6ccb3454a38928d6b to your computer and use it in GitHub Desktop.
Save shopifypartners/1bf99d0e7227c1d6ccb3454a38928d6b to your computer and use it in GitHub Desktop.
Full snippet of accessible breadcrumbs using Liquid - https://www.shopify.com/partners/blog/breadcrumb-navigation
{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %}
{% assign t = template | split: '.' | first %}
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol>
<li>
<a href="/" title="Home">Home</a>
</li>
{% case t %}
{% when 'page' %}
<li>
<a href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{% when 'product' %}
{% if collection.url %}
<li>
{{ collection.title | link_to: collection.url }}
</li>
{% endif %}
<li>
<a href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{% when 'collection' and collection.handle %}
{% if current_tags %}
<li>{{ collection.title | link_to: collection.url }}</li>
<li>
{% capture tag_url %}{{ collection.url }}/{{ current_tags | join: "+"}}{% endcapture %}
<a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{% else %}
<li>
<a href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{% endif %}
{% when 'blog' %}
{% if current_tags %}
<li>{{ blog.title | link_to: blog.url }}</li>
<li>
{% capture tag_url %}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{% endcapture %}
<a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{% else %}
<li>
<a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{% endif %}
{% when 'article' %}
<li>{{ blog.title | link_to: blog.url }}</li>
<li>
<a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{% else %}
<li aria-current="page">
<a href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{% endcase %}
</ol>
</nav>
{% endunless %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment