Abodoo a wɔayam

Kyerɛ beae a krataafa a ɛwɔ hɔ mprempren no wɔ wɔ akwantu nhyehyɛe bi a ɛde mpaapaemu ahorow ka ho ankasa denam CSS so.

Wɔ kratafa yi so

Nhwɛsoɔ

Fa list a wɔahyehyɛ anaa wɔanhyehyɛ a wɔahyehyɛ nneɛma a ɛwɔ link mu di dwuma fa yɛ breadcrumb a wɔayɛ no ketewaa bi. Fa yɛn utilities no fa styles foforo ka ho sɛnea wopɛ.

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

Nneɛma a wɔkyekyɛ mu

Wɔde dividers ka ho wɔ CSS mu ankasa denam ::beforene content. Wobetumi asesa wɔn denam nsakrae a wɔbɛyɛ wɔ CSS amanne agyapade a ɛwɔ mpɔtam hɔ no so --bs-breadcrumb-divider, anaasɛ ɛnam $breadcrumb-dividerSass nsakrae no so — ne $breadcrumb-divider-flippedne RTL yɔnko no, sɛ ɛho hia a. Yɛdefault kɔ yɛn Sass variable no so, a wɔde ato hɔ sɛ fallback kɔ custom property no so. Saa kwan yi so no, wobɛnya wiase nyinaa mpaapaemu a wobɛtumi abɔ so a worenboaboa CSS ano bio bere biara.

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

Sɛ woresakra denam Sass so a, ɛho hia sɛ quote adwuma no yɛ quotes a atwa ahama bi ho ahyia no. Sɛ nhwɛso no, sɛ wode di dwuma >sɛ kyekyɛfo a, wubetumi de eyi adi dwuma:

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

Ɛsan nso yɛ yie sɛ wode SVG ahyɛnsodeɛ a wɔde ahyɛ mu bedi dwuma . Fa di dwuma denam yɛn CSS custom property so, anaa fa Sass variable no di dwuma.

<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");

Wubetumi nso ayi mpaapaemu nhyehyɛe no afi hɔ --bs-breadcrumb-divider: '';(nhama a hwee nni mu wɔ CSS amanne agyapade mu no bu akontaa sɛ botae), anaasɛ wode Sass nsakrae no besi $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;

Nneɛma a wotumi nya

Esiane sɛ breadcrumbs ma navigation nti, ɛyɛ adwene pa sɛ wode label a ntease wom bɛka ho te sɛ aria-label="breadcrumb"nea wobɛkyerɛkyerɛ navigation ko a wɔde ama wɔ <nav>element no mu, ne sɛnea wode an bedi dwuma aria-current="page"wɔ ade a etwa to wɔ set no mu de akyerɛ sɛ egyina hɔ ma krataafa a ɛwɔ hɔ mprempren no.

Sɛ wopɛ nsɛm pii a, hwɛ WAI-ARIA Authoring Practices ma breadcrumb pattern no .

Sass

Nneɛma a Ɛsakra

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