مانيءَ جو ٽڪر

ظاهر ڪريو موجوده صفحي جي جڳھ ھڪڙي نيويگيشنل hierarchy ۾ جيڪو خودڪار طور تي 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-dividerSass variable ذريعي - ۽ $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 variable.

<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: '';(سي ايس ايس ڪسٽم پراپرٽيز ۾ خالي اسٽرنگ ھڪڙي قيمت جي طور تي شمار ڪن ٿا)، يا سيٽنگ کي سيٽ ڪرڻ لاء Sass variable $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;

پهچ

جيئن ته breadcrumbs هڪ نيويگيشن مهيا ڪري ٿو، اهو هڪ سٺو خيال آهي هڪ بامعني ليبل شامل ڪرڻ جهڙوڪ عنصر aria-label="breadcrumb"۾ مهيا ڪيل نيويگيشن جي قسم کي بيان ڪرڻ ، انهي سان گڏ هڪ لاڳو ڪرڻ لاء سيٽ جي آخري شيء کي ظاهر ڪرڻ لاء اهو ظاهر ڪرڻ لاء اهو موجوده صفحي جي نمائندگي ڪري ٿو.<nav>aria-current="page"

وڌيڪ معلومات لاءِ، ڏسو WAI-ARIA تصنيف جي مشقن لاءِ breadcrumb pattern .

ساس

متغير

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