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>