روٹی 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"
اس بات کی نشاندہی کرنے کے لیے کہ یہ موجودہ صفحہ کی نمائندگی کرتا ہے۔
مزید معلومات کے لیے، ARIA تصنیف کی مشقیں گائیڈ بریڈ کرمب پیٹرن دیکھیں ۔