Breadcrumbs

Design System Navigation

Breadcrumbs Complete

  • 
    
      <nav class="c-breadcrumbs" role="navigation">
        <ul class="c-breadcrumbs__list">
                  <li class="c-breadcrumbs__list-item u-font--secondary--s u-text-transform--upper u-display--inline-block u-color--gray">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>
                <a  href="/"  class="c-breadcrumbs__link can-be--white">Home</a>
              </strong>
            </li>
                  <li class="c-breadcrumbs__list-item u-font--secondary--s u-text-transform--upper u-display--inline-block u-color--gray">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>
                <a  href="/vitality"  class="c-breadcrumbs__link can-be--white">Vitality</a>
              </strong>
            </li>
                  <li class="c-breadcrumbs__list-item u-font--secondary--s u-text-transform--upper u-display--inline-block u-color--gray">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>
                <a  class="c-breadcrumbs__link can-be--white">Photos</a>
              </strong>
            </li>
              </ul>
      </nav>
      <!-- /.breadcrumbs -->
    
    
    {% if breadcrumbs %}
      <nav class="c-breadcrumbs" role="navigation">
        <ul class="c-breadcrumbs__list">
          {% for item in breadcrumbs.items %}
            <li class="c-breadcrumbs__list-item u-font--secondary--s u-text-transform--upper u-display--inline-block u-color--gray">
              <span class="u-icon u-icon--xs u-path-fill--gray">{% include '@atoms/icons/icon-arrow-bracket-right.twig' %}</span>
              <strong>
                <a {% if item.url %} href="{{ item.url }}" {% endif %} class="c-breadcrumbs__link can-be--white">{{ item.text }}</a>
              </strong>
            </li>
          {% endfor %}
        </ul>
      </nav>
      <!-- /.breadcrumbs -->
    {% endif %}