Shopify Breadcrumbs

breadcrumbs.liquid

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="page-breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol class="page-breadcrumbs-list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
      <a itemprop="item" class="page-breadcrumbs-link" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    {%- case t -%}
      {%- when 'page' -%}
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
          <a itemprop="item" class="page-breadcrumbs-link" href="{{ page.url }}" aria-current="page">
            <span itemprop="name">{{ page.title }}</span>
          </a>
          <meta itemprop="position" content="2" />
        </li>
      {%- when 'product' -%}
        {% assign productCollection = blank %}
        {% for collection in product.collections %}
          {% if collection.handle == 'all' %}
          {% continue %}
          {% elsif true %}
            {% assign productCollection = collection %}
            {% break %}
          {% endif %}
        {% endfor %}  
        {%- if productCollection.url -%}
          {% assign nextPos = 3 %}
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ productCollection.url }}">
              <span itemprop="name">{{ productCollection.title }}</span>
            </a>
            <meta itemprop="position" content="2" />
          </li>
        {%- endif -%}
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
          <a itemprop="item" class="page-breadcrumbs-link" href="{{ product.url }}" aria-current="page">
            <span itemprop="name">{{ product.title }}</span>
          </a>
          <meta itemprop="position" content="{{ nextPos }}" />
        </li>
      {%- when 'collection' and collection.handle -%}
        {%- if current_tags -%}
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ collection.url }}">
              <span itemprop="name">{{ collection.title }}</span>
            </a>
            <meta itemprop="position" content="2" />
          </li>
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ tag_url }}" aria-current="page">
              <span itemprop="name">{{ current_tags | join: " + "}}</span>
            </a>
            <meta itemprop="position" content="3" />
          </li>
        {%- else -%}
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ collection.url }}" aria-current="page">
              <span itemprop="name">{{ collection.title }}</span>
            </a>
            <meta itemprop="position" content="2" />
          </li>
        {%- endif -%}
      {%- when 'blog' -%}
        {%- if current_tags -%}
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ blog.url }}">
              <span itemprop="name">{{ blog.title }}</span>
            </a>
            <meta itemprop="position" content="2" />
          </li>
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
            <a itemprop="item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-link" href="{{ tag_url }}" aria-current="page">
              <span itemprop="name">{{ current_tags | join: " + " }}</span>
            </a>
            <meta itemprop="position" content="3" />
          </li>
        {%- else -%}
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
            <a itemprop="item" class="page-breadcrumbs-link" href="{{ blog.url }}" aria-current="page">
              <span itemprop="name">{{ blog.title }}</span>
            </a>
            <meta itemprop="position" content="2" />
          </li>
        {%- endif -%}
      {%- when 'article' -%}
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
          <a itemprop="item" class="page-breadcrumbs-link" href="{{ blog.url }}">
            <span itemprop="name">{{ blog.title }}</span>
          </a>
          <meta itemprop="position" content="2" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
          <a itemprop="item" class="page-breadcrumbs-link" href="{{ article.url }}" aria-current="page">
            <span itemprop="name">{{ article.title }}</span>
          </a>
          <meta itemprop="position" content="3" />
        </li>
      {%- else -%}
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="page-breadcrumbs-item">
          <a itemprop="item" class="page-breadcrumbs-link" href="{{ request.path }}" aria-current="page">
            <span itemprop="name">{{ page_title }}</span>
          </a>          
          <meta itemprop="position" content="2" />
        </li>
    {%- endcase -%}
  </ol>
</nav>
{%- endunless -%}

breadcrumbs.scss

.page{
	&-breadcrumbs{
		display: block;
		margin: 40px 0;
		&-list{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 10px;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		&-item {
			display: inline-flex;
			align-items: center;
			&:not(:last-child):after {
				border-style: solid;
				border-width: .10em .10em 0 0;
				content: '';
				display: inline-block;
				height: .20em;
				position: relative;
				transform: rotate(45deg);
				vertical-align: middle;
				width: .20em;
				margin-left: 8px;
			}
		}
		&-link{
			text-decoration: underline;
			&[aria-current="page"]{
				text-decoration: none;
				&:hover, &:focus{
					text-decoration: underline;
				}
			}
		}
	}
}