A navigation element displaying the path of a page relative to a parent page.
<nav class="azalea-breadcrumb px-2 md:px-0" role="navigation" aria-label="Breadcrumb">
<ol class="flex items-center space-x-6 pl-0 overflow-x-auto azalea-scrollbar-hidden">
<li class="">
<div class="azalea-text-sm md:azalea-text-md"><a class="text-tertiary-500 hover:text-tertiary-900 whitespace-nowrap truncate" href="#">Item one</a></div>
</li>
<li class="flex items-center">
<div>/</div>
<div class="azalea-text-sm md:azalea-text-md ml-4"><a class="text-tertiary-500 hover:text-tertiary-900 whitespace-nowrap truncate" href="#">Item two</a></div>
</li>
<li class="flex items-center">
<div>/</div>
<div class="azalea-text-sm md:azalea-text-md ml-4"><a class="text-tertiary-500 hover:text-tertiary-900 whitespace-nowrap truncate" href="#">Item three</a></div>
</li>
</ol>
</nav>
{% apply spaceless %}
{% if items|length > 0 %}
<nav class="azalea-breadcrumb px-2 md:px-0" role="navigation" aria-label="Breadcrumb">
<ol class="flex items-center space-x-6 pl-0 overflow-x-auto azalea-scrollbar-hidden">
{% for item in items %}
<li class="{% if not loop.first %}flex items-center{% endif %}">
{% if not loop.first %}<div>/</div>{% endif %}
<div class="azalea-text-sm md:azalea-text-md{% if not loop.first %} ml-4{% endif %}">
{% if item.url %}
<a class="text-tertiary-500 hover:text-tertiary-900 whitespace-nowrap truncate" href="{{ item.url }}">{{ item.text }}</a>
{% else %}
<span class="text-tertiary-900 whitespace-nowrap text-ellipsis truncate">{{ item.text }}</span>
{% endif %}
</div>
</li>
{% endfor %}
</ol>
</nav>
{% endif %}
{% endapply %}