ꯕ꯭ꯔꯦꯗꯛꯔꯥꯝ ꯇꯧꯕꯥ꯫

ꯈꯨꯗꯝ

ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯕ꯭ꯔꯦꯗꯛꯔꯥꯝ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯗꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯄꯥꯝꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

<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>

ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ꯫

ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ ꯑꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ ::beforeꯑꯃꯁꯨꯡ content. ꯃꯈꯣꯌ ꯑꯁꯤ ꯂꯣꯀꯦꯜ CSS ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯃꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ --bs-breadcrumb-divider, ꯅꯠꯠꯔꯒꯥ $breadcrumb-dividerSass ꯚꯦꯔꯤꯑꯦꯕꯂꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ — ꯑꯃꯁꯨꯡ $breadcrumb-divider-flippedꯃꯁꯤꯒꯤ RTL ꯀꯥꯎꯟꯇꯔꯄꯥꯔꯇꯀꯤꯗꯃꯛ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯇꯧꯏ, ꯃꯁꯤ ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯗꯥ ꯐꯣꯂꯕꯦꯛ ꯑꯣꯏꯅꯥ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯑꯃꯠꯇꯗꯥ 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>

ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯀꯣꯠ ꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤꯅꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯂꯩꯕꯥ ꯀꯣꯠꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, >ꯗꯤꯚꯥꯏꯗꯔ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ:

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

ꯑꯦꯝꯕꯦꯗꯦꯗ SVG ꯑꯥꯏꯀꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯁꯨ ꯌꯥꯏ . ꯑꯩꯈꯣꯌꯒꯤ CSS ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯤꯌꯨ, ꯅꯠꯔꯒꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ꯫

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

ꯅꯍꯥꯛꯅꯥ ꯗꯤꯚꯥꯏꯗꯔ ꯁꯦꯇꯤꯡ ꯑꯗꯨꯁꯨ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯏ --bs-breadcrumb-divider: '';(CSS ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯏꯝꯄꯣꯔꯠ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡ ꯑꯗꯨ ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯀꯥꯎꯟꯇ ꯇꯧꯏ), ꯅꯠꯠꯔꯒꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨ $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"ꯃꯁꯤꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯗꯨ ꯔꯤꯞꯔꯖꯦꯟꯇ ꯇꯧꯔꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯛꯅꯕꯥ ꯁꯦꯠ ꯑꯗꯨꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯑꯁꯤꯁꯨ ꯑꯐꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯅꯤ꯫

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ, ARIA ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡꯒꯤ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ ꯕ꯭ꯔꯦꯗꯛꯔꯥꯝ ꯄꯦꯇꯔꯟ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯕ꯭ꯔꯦꯗꯛꯔꯥꯃꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .breadcrumb. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$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;