ब्रेडक्रम्ब

नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस् जसले स्वचालित रूपमा 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। तिनीहरू स्थानीय CSS अनुकूलन गुण परिमार्जन गरेर --bs-breadcrumb-divider, वा $breadcrumb-dividerSass चर मार्फत परिवर्तन गर्न सकिन्छ — र $breadcrumb-divider-flippedयसको RTL समकक्षको लागि, यदि आवश्यक छ भने। हामी हाम्रो Sass चरमा पूर्वनिर्धारित गर्छौं, जुन अनुकूलन गुणमा फलब्याकको रूपमा सेट गरिएको छ। यस तरिकाले, तपाइँ एक ग्लोबल डिभाइडर पाउनुहुन्छ जुन तपाइँ कुनै पनि समयमा CSS पुन: कम्पाइल नगरी ओभरराइड गर्न सक्नुहुन्छ।

<nav style="--bs-breadcrumb-divider: '>';" 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>

Sass मार्फत परिमार्जन गर्दा, उद्धरण प्रकार्यले स्ट्रिङ वरिपरि उद्धरणहरू उत्पन्न गर्न आवश्यक छ। उदाहरणका लागि, >डिभाइडरको रूपमा प्रयोग गरेर, तपाइँ यसलाई प्रयोग गर्न सक्नुहुन्छ:

$breadcrumb-divider: quote(">");

इम्बेडेड SVG आइकन प्रयोग गर्न पनि सम्भव छ । यसलाई हाम्रो CSS अनुकूलन गुण मार्फत लागू गर्नुहोस्, वा Sass चर प्रयोग गर्नुहोस्।

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" 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>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

तपाईंले डिभाइडर सेटिङ हटाउन सक्नुहुन्छ --bs-breadcrumb-divider: '';(CSS अनुकूलन गुणहरूमा खाली स्ट्रिङहरू मानको रूपमा गणना गरिन्छ), वा Sass चर सेट गर्नुहोस् $breadcrumb-divider: none;।

<nav style="--bs-breadcrumb-divider: '';" 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>

$breadcrumb-divider: none;

पहुँच

aria-label="breadcrumb"ब्रेडक्रम्ब्सले नेभिगेसन प्रदान गर्ने भएकोले, तत्वमा प्रदान गरिएको नेभिगेसनको प्रकारको वर्णन गर्नका <nav>साथै aria-current="page"यसले हालको पृष्ठलाई प्रतिनिधित्व गर्छ भनी संकेत गर्न सेटको अन्तिम वस्तुमा लागू गर्ने जस्ता अर्थपूर्ण लेबल थप्नु राम्रो विचार हो।

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

सास

चरहरू

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;