نشانگر صفحات
HURO یک جزء نان خرد شده را فراهم می کند که می توانید از آن استفاده کنید تا تجربه ناوبری خود را افزایش دهید.به طور پیش فرض های پیش فرض Breadcrumb توسط نشانه اسلش جدا شده اند.شما می توانید از آیکون ها نیز استفاده کنید.نشانه گذاری برای جزئیات بیشتر در مورد استفاده.شما همچنین می توانید با استفاده از آن هماهنگی را تغییر دهید is-centered یا is-right کلاس در نشانگر صفحات عنصر.
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span>مانیتور</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>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>مانیتور</span>
</a>
</li>
</ul>
</nav>
فلش جدا کننده
اقلام نشانگر صفحات را می توان با جداکننده های جایگزین جدا کرد. برای نمایش جداکننده‌های پیکان، کلاس has-arrow-جدا کننده را به عنصر نشانگر صفحات هدف اضافه کنید. برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span>مانیتور</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>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>مانیتور</span>
</a>
</li>
</ul>
</nav>
جدا کننده گرد
اقلام نشانگر صفحات را می توان با جداکننده های جایگزین جدا کرد. برای نمایش جداکننده‌های گرد، کلاس has-bullet-جدا کننده را به عنصر نشانگر صفحات هدف اضافه کنید. برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span>مانیتور</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>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>مانیتور</span>
</a>
</li>
</ul>
</nav>
جدا کننده نقطه
اقلام نشانگر صفحات را می توان با جداکننده های جایگزین جدا کرد. برای نمایش جداکننده‌های نقطه، کلاس has-dot-جدا کننده را به عنصر نشانگر صفحات هدف اضافه کنید. برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span>مانیتور</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>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>مانیتور</span>
</a>
</li>
</ul>
</nav>
جدا کننده جهت
اقلام نشانگر صفحات را می توان با جداکننده های جایگزین جدا کرد. برای نمایش جداکننده‌های جهت، کلاس has-Succeeds-جدا کننده را به عنصر نشانگر صفحات هدف اضافه کنید. برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span>مانیتور</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>کاتالوگ</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="cpu"></i>
</span>
<span>کامپیوتر</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i data-feather="monitor"></i>
</span>
<span>مانیتور</span>
</a>
</li>
</ul>
</nav>