مسیر راهنما

مثال ها

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">خانه</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
    <li class="breadcrumb-item active" aria-current="page">کتابخانه</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
    <li class="breadcrumb-item"><a href="#">کتابخانه</a></li>
    <li class="breadcrumb-item active" aria-current="page">داده</li>
  </ol>
</nav>

نسخه تیره

با استفاده از کلاس breadcrumb-dark مسیر راهنما را تیره کنید.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dark">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dark">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
    <li class="breadcrumb-item active" aria-current="page">کتابخانه</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dark">
    <li class="breadcrumb-item"><a href="#">خانه</a></li>
    <li class="breadcrumb-item"><a href="#">کتابخانه</a></li>
    <li class="breadcrumb-item active" aria-current="page">داده</li>
  </ol>
</nav>

جداکننده (Dividers)

جداکننده در فایل css بصورت ::before و content تعریف می شود هم چنین میتوانید بصورت local --bs-breadcrumb-divider تعریف کنید و $breadcrumb-divider را در content قرار دهید.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">خانه</a></li>
		<li class="breadcrumb-item active" aria-current="page">کتابخانه</li>
	</ol>
</nav>

می توانید مقدار --bs-breadcrumb-divider:' '; را خالی بگذارید.

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">خانه</a></li>
		<li class="breadcrumb-item active" aria-current="page">کتابخانه</li>
	</ol>
</nav>

با dots

افزودن کلاس breadcrumb-dots 

<nav aria-label="breadcrumb">
	<ol class="breadcrumb breadcrumb-dots">
		<li class="breadcrumb-item"><a href="#"><i class="bi bi-house me-1"></i> خانه</a></li>
		<li class="breadcrumb-item active">کتابخانه</li>
	</ol>
</nav>