نشانگر صفحه در Bootstrap 5

نشانگر صفحه در Bootstrap 5

با بکارگیری نشانگر صفحه (Breadcrumb) می توانید مکان صفحه فعلی را در یک سلسله مراتب ناوبری نشان دهید. چون جدا کننده های آن از طریق CSS به طور خودکار اضافه می شوند ، نیازی به افزودن جداکننده ها در سند Html نیست.

مثال

از یک لیست مرتب یا غیر مرتب (که شامل پیوندهای صفحه ها باشد) استفاده کنید تا نشانگر صفحه ای با حداقل استایل ایجاد کنید. می توانید از ابزارهای بوت استرپ برای اضافه کردن استایل های اضافی نیز به دلخواه استفاده کنید.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

جداکننده ها

جدا کننده ها به طور خودکار از طریق before::  و content در CSS اضافه می شوند. در صورت نیاز ، می توان با تغییر یک ویژگی سفارشی محلی CSS مثلاً bs-breadcrumb-divider-- یا از طریق متغیر ساس breadcrumb-divider$ و متغیر breadcrumb-divider-flipped$ برای نسخه مشابه RTL (راست به چپ) آن را تغییر داد. اگر ویژگی های سفارشی در CSS مشخص نشده باشد متغیرهای Sass به صورت پیش فرض استفاده می شود ولی اگر ویژگی های CSS مشخص شده باشد از آنها استفاده می شود. با این روش ، بدون نیاز به تغییر کد CSS ، می توانید یک تقسیم کننده عمومی داشته باشید.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

هنگام تغییر جدا کننده با کمک Sass ، باید از تابع  quote استفاده کرد. برای مثال اگر می خواهید جدا کننده کاراکتر < باشد ، می توانید از کد زیر استفاده کنید:

$breadcrumb-divider: quote(">");

همچنین می توانید از آیکون svg به صورت تعبیه شده استفاده کنید. آیکون را از طریق ویژگی سفارشی CSS یا متغیر Sass می توانید اعمال کنید:

• استفاده از آیکون svg برای جداکننده از طریق کد CSS :

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

• استفاده از آیکون svg برای جداکننده از طریق متغیر Sass :

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

همچنین می توانید جدا کننده را به طور کلی حذف کنید:

• حذف جداکننده از طریق CSS با String تهی :

--bs-breadcrumb-divider: '';

• حذف جدا کننده از طریق متغیر Sass  با مقدار none:

$breadcrumb-divider: none;

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

دسترس پذیری

از آنجا که نشانگر صفحه امکان ناوبری را فراهم می کند ، بهتر است برچسب معنی داری نیز برای توضیح نوع ناوبری به تگ <nav> بدهید مثلاً "aria-label="breadcrumb همچنین با استفاده از صفت "aria-current="page برای آخرین آیتم داخل نشانگر صفحه ، مشخص کنید که این آیتم مربوط به صفحه فعلی است. به این شکل می توانید به افرادی که از ابزار های کمکی (مثلاً صفحه خوان ها) در مرور وب استفاده می کنند (مثلاً کم بینایان و نابینایان) کمک کنید.

متغیر های Sass

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;

// Clicksite(clicksite.ir@gmail.com)