<nav class=“bp-breadcrumb” aria-label=“breadcrumbs”>

<ul>
    <li><a href="{{ site.baseurl }}/"><small>{{ "Home" | upcase }}</small></a></li>
    {%- capture page_url_without_index_html -%}{{ page.url | remove: "/index.html" }}{%- endcapture -%}
    {% assign splitted_url_parts = page_url_without_index_html | split: '/' %}
    {% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus:1 }}{% endcapture %}

    {% for i in (1..forLoopMaxInt) %}

        {% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/index.html{% endcapture %}
        {% capture current_breadcrumb_md_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
        {% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %}

        {% for breadcrumb_page in site.pages %}

            {% if current_breadcrumb_url == breadcrumb_page.permalink or current_breadcrumb_md_url == breadcrumb_page.permalink %}
                <li><a href="{{ site.baseurl }}{{breadcrumb_page.permalink}}"><small>{{breadcrumb_page.breadcrumb | upcase}}</small></a></li>
            {% endif %}

            <!-- Special case for the media index.html since the media page is paginated and cannot have a permalink -->
            {% if current_breadcrumb_url == breadcrumb_page.file_url or current_breadcrumb_md_url == breadcrumb_page.file_url %}
                <li><a href="{{ site.baseurl }}{{breadcrumb_page.file_url}}"><small>{{breadcrumb_page.breadcrumb | upcase}}</small></a></li>
            {% endif %}
        {% endfor %}

        <!-- Repeat for _services -->
        {% for breadcrumb_page in site.application-guidelines %}
            {% if current_breadcrumb_url == breadcrumb_page.permalink or current_breadcrumb_md_url == breadcrumb_page.permalink  %}
                <li><a href="{{ site.baseurl }}{{breadcrumb_page.permalink}}"><small>{{breadcrumb_page.breadcrumb | upcase}}</small></a></li>
            {% endif %}
        {% endfor %}

    {% endfor %}
</ul>

</nav>