ਬਰੈੱਡਕ੍ਰੰਬ

ਇੱਕ ਨੈਵੀਗੇਸ਼ਨਲ ਲੜੀ ਦੇ ਅੰਦਰ ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਟਿਕਾਣੇ ਨੂੰ ਦਰਸਾਓ ਜੋ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ 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;