خرده نان

مکان صفحه فعلی را در یک سلسله مراتب ناوبری که به طور خودکار جداکننده ها را از طریق CSS اضافه می کند، نشان دهید.

در این صفحه

مثال

از یک لیست مرتب یا نامرتب با موارد لیست پیوندی استفاده کنید تا یک پودر سوخاری با سبک حداقلی ایجاد کنید. از ابزارهای ما برای افزودن سبک های اضافی به دلخواه استفاده کنید.

<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>

تقسیم کننده ها

تقسیم کننده ها به طور خودکار در CSS از طریق ::beforeو اضافه می contentشوند. آنها را می توان با تغییر یک ویژگی سفارشی محلی CSS --bs-breadcrumb-dividerیا از طریق $breadcrumb-dividerمتغیر Sass - و $breadcrumb-divider-flippedدر صورت نیاز برای همتای RTL آن تغییر داد. ما به طور پیش فرض متغیر Sass خود را تعیین می کنیم که به عنوان یک بازگشت به ویژگی سفارشی تنظیم شده است. به این ترتیب، شما یک تقسیم کننده جهانی دریافت می کنید که می توانید بدون کامپایل مجدد 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، تابع نقل قول برای تولید نقل قول ها در اطراف یک رشته مورد نیاز است. به عنوان مثال، با استفاده >از تقسیم کننده، می توانید از این استفاده کنید:

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

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

<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>

$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");

همچنین می‌توانید تنظیم تقسیم‌کننده را حذف کنید --bs-breadcrumb-divider: '';(رشته‌های خالی در ویژگی‌های سفارشی CSS به‌عنوان یک مقدار محاسبه می‌شوند)، یا متغیر Sass را روی $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>

$breadcrumb-divider: none;

دسترسی

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

برای اطلاعات بیشتر، به شیوه های نگارش WAI-ARIA برای الگوی پودر سوخاری مراجعه کنید.

ساس

متغیرها

$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;