ब्रेडक्रम्ब
नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस् जसले स्वचालित रूपमा 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 Authoring Practices Guide breadcrumb pattern ।