<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <!-- Home always first -->
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="{{ routes.root_url }}">Home</a>
    </li>

    {%- case request.page_type -%}
      
      {%- when 'product' -%}
        {%- if collection.url -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title | remove: "Root Catalog/"  }}</a>
          </li>
        {%- endif -%}

    {% comment %}
        {%- if product.vendor -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ routes.all_products_collection_url }}?q={{ product.vendor | url_encode }}">{{ product.vendor }}</a>
          </li>
        {%- endif -%}
      {% endcomment %}

        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
        </li>

      {%- when 'collection' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title | remove: "Root Catalog" }}</a>
        </li>

      {%- when 'page' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
        </li>

      {%- when 'blog' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
        </li>

      {%- when 'article' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ blog.url }}">{{ blog.title }}</a>
        </li>
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
        </li>

      {%- else -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
        </li>
    {%- endcase -%}
  </ol>
</nav>
