ब्रेडक्रम्ब

नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस् जसले स्वचालित रूपमा 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"यसले हालको पृष्ठलाई प्रतिनिधित्व गर्छ भनी संकेत गर्न सेटको अन्तिम वस्तुमा लागू गर्ने जस्ता अर्थपूर्ण लेबल थप्नु राम्रो विचार हो।

थप जानकारीको लागि, ब्रेडक्रम्ब ढाँचाको लागि WAI-ARIA लेखक अभ्यासहरू हेर्नुहोस् ।