ব্ৰেডক্ৰাম

এটা নেভিগেচনেল হাইৰাৰ্কিৰ ভিতৰত বৰ্তমান পৃষ্ঠাৰ অৱস্থান সূচাওক যি স্বয়ংক্ৰিয়ভাৱে 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"

অধিক তথ্যৰ বাবে, ব্ৰেডক্ৰাম আৰ্হিৰ বাবে WAI-ARIA ৰচনা পদ্ধতিসমূহ চাওক ।