ব্রেডক্রাম্ব

একটি নেভিগেশনাল হায়ারার্কির মধ্যে বর্তমান পৃষ্ঠার অবস্থান নির্দেশ করুন যা স্বয়ংক্রিয়ভাবে 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 অথরিং প্র্যাকটিস দেখুন ।