Breadcrumb

یک کامپوننت breadcrumb ساده

رنگ ندارد
اندازه دارد
متغیر دارد

Bulma breadcrumb یک کامپوننت ناوبری ساده است که فقط به یک بخش breadcrumb و یک ul list نیاز دارد. تقسیم کننده ها به طور اتوماتیک در محتوای ::before تگ li ایجاد می شود.

می توانید با استفاده از اصلاح کننده is-active در تگ li صفحه جاری را مشخص کنید. در اینصورت لینک صفحه جاری غیر فعال می شود.



<nav class="breadcrumb" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">بولما</a></li>
  <li><a href="#">دستورالعملها</a></li>
  <li><a href="#">کامپوننت ها</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

جهت #

برای ترازهای جایگزین، از اصلاح کننده های is-centered و is-left در بخش breadcrumb استفاده کنید.


<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>

<nav class="breadcrumb is-left" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

آیکون ها #

می توانید از هر یک از آیکون های Font Awesome استفاده کنید.


<nav class="breadcrumb" aria-label="breadcrumbs">
 <ul>
  <li>
   <a href="#">
    <span class="icon is-small">
     <i class="fas fa-home" aria-hidden="true"></i>
    </span>
    <span>Bulma</span>
   </a>
  </li>
  <li>
   <a href="#">
    <span class="icon is-small">
     <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    <span>Documentation</span>
   </a>
  </li>
  <li>
   <a href="#">
    <span class="icon is-small">
     <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
    </span>
    <span>Components</span>
   </a>
  </li>
  <li class="is-active">
   <a href="#">
    <span class="icon is-small">
     <i class="fas fa-thumbs-up" aria-hidden="true"></i>
    </span>
    <span>Breadcrumb</span>
   </a>
  </li>
 </ul>
</nav>
                                    

جدا کننده های جایگزین #

می توانید از بین 4 جدا کننده یکی را انتخاب کنید: has-arrow-separator has-bullet-separator has-dot-separator و has-succeeds-separator.


<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

اندازه ها #

می توانید از بین 3 اندازه یکی را انتخاب کنید: is-small is-medium and is-large .


<nav class="breadcrumb is-small" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
 <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
                                </nav>
                                    

<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

<nav class="breadcrumb is-large" aria-label="breadcrumbs">
 <ul>
  <li><a href="#">Bulma</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Components</a></li>
  <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
 </ul>
</nav>
                                    

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$breadcrumb-item-color color $link hsl(217, 71%, 53%)
$breadcrumb-item-hover-color color $link-hover hsl(0, 0%, 21%)
$breadcrumb-item-active-color color $text-strong hsl(0, 0%, 21%)
$breadcrumb-item-padding-vertical string 0
$breadcrumb-item-padding-horizontal size 0.75em
$breadcrumb-item-separator-color color $border-hover hsl(0, 0%, 71%)