Breadcrumb

Onyesha eneo la ukurasa wa sasa ndani ya daraja la urambazaji ambalo huongeza vitenganishi kiotomatiki kupitia CSS.

Katika ukurasa huu

Mfano

Tumia orodha iliyoagizwa au isiyoagizwa iliyo na orodha iliyounganishwa ili kuunda mkate ulio na muundo mdogo. Tumia huduma zetu kuongeza mitindo ya ziada unavyotaka.

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

Wagawanyaji

Vigawanyiko huongezwa kiotomatiki katika CSS kupitia ::beforena content. Zinaweza kubadilishwa kwa kurekebisha mali maalum ya CSS ya ndani --bs-breadcrumb-divider, au kupitia utofauti wa $breadcrumb-dividerSass — na $breadcrumb-divider-flippedkwa mwenzake wa RTL, ikihitajika. Tunaweka chaguo-msingi kwa utofauti wetu wa Sass, ambao umewekwa kama njia mbadala kwa mali maalum. Kwa njia hii, unapata kigawanyiko cha kimataifa ambacho unaweza kubatilisha bila kurejesha CSS wakati wowote.

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

Wakati wa kurekebisha kupitia Sass, kazi ya kunukuu inahitajika ili kutoa nukuu karibu na kamba. Kwa mfano, kwa kutumia >kama kigawanyaji, unaweza kutumia hii:

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

Pia inawezekana kutumia ikoni ya SVG iliyopachikwa . Itumie kupitia kipengele chetu maalum cha CSS, au tumia utofauti wa 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");

Unaweza pia kuondoa mpangilio wa kigawanyaji --bs-breadcrumb-divider: '';(kamba tupu katika hesabu za sifa maalum za CSS kama thamani), au kuweka kigezo cha Sass kuwa $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;

Ufikivu

Kwa kuwa breadcrumbs hutoa urambazaji, ni vyema kuongeza lebo yenye maana kama vile aria-label="breadcrumb"kuelezea aina ya urambazaji iliyotolewa katika <nav>kipengele, pamoja na kutumia aria-current="page"kipengee cha mwisho cha seti ili kuonyesha kuwa inawakilisha ukurasa wa sasa.

Kwa maelezo zaidi, angalia Mbinu za Uandishi za WAI-ARIA kwa muundo wa breadcrumb .

Sass

Vigezo

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