ବ୍ରେଡ୍କ୍ରମ୍ |
ଏକ ନାଭିଗେସନ୍ ହାଇରାର୍କି ମଧ୍ୟରେ ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠାର ଅବସ୍ଥାନ ସୂଚାନ୍ତୁ ଯାହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ 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"
ଅଧିକ ସୂଚନା ପାଇଁ, ARIA ପ୍ରାଧିକରଣ ଅଭ୍ୟାସ ଗାଇଡ୍ ରୁଟି କ୍ରମ୍ ପ୍ୟାଟର୍ ଦେଖନ୍ତୁ |