روٹی crumb

نیویگیشنل درجہ بندی کے اندر موجودہ صفحہ کے مقام کی نشاندہی کریں جو خود بخود 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>

جداکار تبدیل کرنا

::beforeسی ایس ایس میں اور کے ذریعے الگ کرنے والے خود بخود شامل ہو جاتے ہیں content۔ انہیں تبدیل کرکے تبدیل کیا جاسکتا ہے $breadcrumb-divider۔ ایک سٹرنگ کے ارد گرد اقتباسات پیدا کرنے کے لیے اقتباس فنکشن کی ضرورت ہے، لہذا اگر آپ سیپریٹر کے طور پر چاہتے ہیں ، تو> آپ اسے استعمال کر سکتے ہیں:

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

بیس 64 ایمبیڈڈ ایس وی جی آئیکن استعمال کرنا بھی ممکن ہے :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

$breadcrumb-dividerالگ کرنے والے کو ترتیب دے کر ہٹایا جا سکتا ہے none:

$breadcrumb-divider: none;

رسائی

چونکہ بریڈ کرمبس نیویگیشن فراہم کرتے ہیں، اس لیے ایک بامعنی لیبل شامل کرنا اچھا خیال ہے جیسے aria-label="breadcrumb"کہ عنصر میں فراہم کردہ نیویگیشن کی قسم کو بیان کرنا <nav>، اور ساتھ ہی سیٹ کے آخری آئٹم پر لاگو کرنا aria-current="page"اس بات کی نشاندہی کرنے کے لیے کہ یہ موجودہ صفحہ کی نمائندگی کرتا ہے۔

مزید معلومات کے لیے، بریڈ کرمب پیٹرن کے لیے WAI-ARIA تصنیف کی مشقیں دیکھیں ۔