{%- if page and page.ancestors %}
  <nav class="primer-breadcrumbs" aria-label="{% trans %}Breadcrumb{% endtrans %}">
    <ol class="primer-breadcrumbs-list">
      {%- for ancestor in page.ancestors | reverse %}
        <li class="primer-breadcrumbs-item">
          {%- if ancestor.url %}
            <a href="{{ ancestor.url | url }}">{{ ancestor.title }}</a>
          {%- else %}
            <span>{{ ancestor.title }}</span>
          {%- endif %}
        </li>
      {%- endfor %}
      <li class="primer-breadcrumbs-item">
        <span class="primer-breadcrumbs-current" aria-current="page">{{ page.title }}</span>
      </li>
    </ol>
  </nav>
{%- endif %}