ବ୍ରେଡ୍କ୍ରମ୍ |

ଏକ ନାଭିଗେସନ୍ ହାଇରାର୍କି ମଧ୍ୟରେ ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠାର ଅବସ୍ଥାନ ସୂଚାନ୍ତୁ ଯାହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ 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(">");

ଏକ ଆଧାର 64 ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG ଆଇକନ୍ ବ୍ୟବହାର କରିବା ମଧ୍ୟ ସମ୍ଭବ :

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

$breadcrumb-dividerସେଟିଂ ଦ୍ୱାରା ବିଚ୍ଛିନ୍ନକର୍ତ୍ତା ଅପସାରଣ କରାଯାଇପାରିବ none:

$breadcrumb-divider: none;

ଅଭିଗମ୍ୟତା

ଯେହେତୁ ରୁଟି ଖଣ୍ଡଗୁଡ଼ିକ ଏକ ନାଭିଗେସନ୍ ପ୍ରଦାନ କରେ, ଏକ ଅର୍ଥପୂର୍ଣ୍ଣ ଲେବଲ୍ ଯୋଡିବା ଏକ ଉତ୍ତମ ଧାରଣା ଯେପରିକି ଉପାଦାନରେ aria-label="breadcrumb"ପ୍ରଦତ୍ତ ନାଭିଗେସନ୍ ପ୍ରକାରକୁ ବର୍ଣ୍ଣନା କରିବା ସହିତ ସେଟ୍ ର ଶେଷ ଆଇଟମ୍ ଉପରେ ପ୍ରୟୋଗ କରିବା ଏହା ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠାକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ |<nav>aria-current="page"

ଅଧିକ ସୂଚନା ପାଇଁ, ବ୍ରେଡ୍ କ୍ରମ୍ pattern ାଞ୍ଚା ପାଇଁ WAI-ARIA ପ୍ରାଧିକରଣ ଅଭ୍ୟାସ ଦେଖନ୍ତୁ |