Breadcrumb
Huro provides a breadcrumb component that you can use to enhance your navigation experience. Default breadcrumb items are seperated by a slash sign. You can use icons as well with breadcrumb items. See markup for more details about usage. You can also change the alignment by using the is-centered or is-right class on the breadcrumb element.
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="shopping-cart"></i>
</span>
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
Arrow Separator
Breadcrumb items can be separated by alternative separators. To display arrow breadcrumb separators, add the has-arrow-separator class to the target breadcrumb element. See markup for more details.
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="shopping-cart"></i>
</span>
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
Bullet Separator
Breadcrumb items can be separated by alternative separators. To display bullet breadcrumb separators, add the has-bullet-separator class to the target breadcrumb element. See markup for more details.
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="shopping-cart"></i>
</span>
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
Dot Separator
Breadcrumb items can be separated by alternative separators. To display dot breadcrumb separators, add the has-dot-separator class to the target breadcrumb element. See markup for more details.
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="shopping-cart"></i>
</span>
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
Succeeds Separator
Breadcrumb items can be separated by alternative separators. To display succeeds breadcrumb separators, add the has-succeeds-separator class to the target breadcrumb element. See markup for more details.
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span>Monitors</span>
</a>
</li>
</ul>
</nav>
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="shopping-cart"></i>
</span>
<span>Catalogue</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>Computers</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>Monitors</span>
</a>
</li>
</ul>
</nav>