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>