ব্ৰেডক্ৰাম
এটা নেভিগেচনেল হাইৰাৰ্কিৰ ভিতৰত বৰ্তমান পৃষ্ঠাৰ অৱস্থান সূচাওক যি স্বয়ংক্ৰিয়ভাৱে 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
। সলনি কৰি সলনি কৰিব পাৰি $breadcrumb-divider
৷ এটা ষ্ট্ৰিঙৰ চাৰিওফালে উদ্ধৃতি সৃষ্টি কৰিবলে উদ্ধৃতি>
ফলনৰ প্ৰয়োজন, গতিকে যদি আপুনি বিভাজক হিচাপে বিচাৰে, আপুনি এইটো ব্যৱহাৰ কৰিব পাৰে:
$breadcrumb-divider: quote(">");
এটা base64 এম্বেড কৰা SVG আইকন ব্যৱহাৰ কৰাও সম্ভৱ :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
বিভাজকটো আঁতৰাব $breadcrumb-divider
পাৰি none
:
$breadcrumb-divider: none;
অভিগম্যতা
যিহেতু ব্ৰেডক্ৰামছে এটা নেভিগেচন প্ৰদান কৰে, এটা অৰ্থপূৰ্ণ লেবেল যোগ কৰাটো এটা ভাল ধাৰণা যেনে উপাদানটোত aria-label="breadcrumb"
প্ৰদান কৰা নেভিগেচনৰ ধৰণ বৰ্ণনা কৰা , লগতে ছেটৰ শেষৰ বস্তুটোত এটা প্ৰয়োগ কৰি ই বৰ্তমান পৃষ্ঠাটোক প্ৰতিনিধিত্ব কৰে বুলি সূচায়।<nav>
aria-current="page"
অধিক তথ্যৰ বাবে, ARIA ৰচনা পদ্ধতিসমূহ সহায়ক breadcrumb pattern চাওক ।