Breadcrumb
Component status:Ready
A navigation component that indicates the user's current location within the site navigation hierarchy.
#
Default Breadcrumb<nav aria-label="Breadcrumb" class="bux-breadcrumb">
<ol class="bux-breadcrumb__list">
<li class="bux-breadcrumb__item">
<a class="bux-breadcrumb__link" href="#">Home</a>
</li>
<li class="bux-breadcrumb__item">
<a class="bux-breadcrumb__link" href="#">Level 1</a>
</li>
<li class="bux-breadcrumb__item">
<a class="bux-breadcrumb__link" href="#">Level 2</a>
</li>
<li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">Level 3</li>
</ol>
</nav>
<nav aria-label="Breadcrumb" class="bux-breadcrumb">
<ol class="bux-breadcrumb__list">
{% for item in breadcrumb %}
{% if loop.last %}
<li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">{{ item.text }}</li>
{% else %}
<li class="bux-breadcrumb__item">
{% if item.url %}
<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
{% else %}
{{ item.text }}
{% endif %}
</li>
{% endif %}
{% endfor %}
</ol>
</nav>