in English

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

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>

ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ꯫

ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ ꯑꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ ::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='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;