hx-breadcrumb component is a navigational helper for pages. It can accept a Icons or characters as a divider.
<ul class="hx-breadcrumb">
<li class="">
<a href="#">Dashboard</a>
</li>
<li class="hx-breadcrumb-divider">/</li>
<li class="">
<a href="#">Parent</a>
</li>
<li class="hx-breadcrumb-divider">/</li>
<li class=" is-disabled">
<a href="#">Child page</a>
</li>
</ul>
<ul class="hx-breadcrumb">
<li class="">
<a href="#">Dashboard</a>
</li>
<li class="hx-breadcrumb-divider">-</li>
<li class="">
<a href="#">Parent</a>
</li>
<li class="hx-breadcrumb-divider">-</li>
<li class=" is-disabled">
<a href="#">Child page</a>
</li>
</ul>
<ul class="hx-breadcrumb">
<li class="">
<a href="#">Dashboard</a>
</li>
<li class="hx-breadcrumb-divider">
<i class="hx-icon icon-angle-right"></i>
</li>
<li class="">
<a href="#">Parent</a>
</li>
<li class="hx-breadcrumb-divider">
<i class="hx-icon icon-angle-right"></i>
</li>
<li class=" is-disabled">
<a href="#">Child page</a>
</li>
</ul>
<ul class="hx-breadcrumb">
<li class="">
<a href="#">Dashboard</a>
</li>
<li class="hx-breadcrumb-divider">
<i class="hx-icon icon-arrow-right"></i>
</li>
<li class="">
<a href="#">Parent</a>
</li>
<li class="hx-breadcrumb-divider">
<i class="hx-icon icon-arrow-right"></i>
</li>
<li class=" is-disabled">
<a href="#">Child page</a>
</li>
</ul>