Ogi birrindua

Adierazi uneko orriaren kokapena CSS bidez bereizleak automatikoki gehitzen dituen nabigazio-hierarkia baten barruan.

Orrialde honetan

Adibidea

Erabili estekatutako zerrendako elementuak dituen ordenatutako edo ordenatu gabeko zerrenda bat gutxieneko estiloko ogibide bat sortzeko. Erabili gure utilitateak nahi duzun moduan estilo gehigarriak gehitzeko.

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

Banatzaileak

Banatzaileak automatikoki gehitzen dira CSS-n ::beforeeta content. --bs-breadcrumb-dividerCSS tokiko propietate pertsonalizatu bat aldatuz edo $breadcrumb-dividerSass aldagaiaren bidez alda daitezke , eta $breadcrumb-divider-flippedbere RTL parekoa, behar izanez gero. Gure Sass aldagaia lehenesten dugu, propietate pertsonalizatuaren ordezko gisa ezartzen dena. Horrela, edozein unetan CSS birkonpilatu gabe gainidatzi dezakezun banatzaile global bat lortuko duzu.

<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 bidez aldatzean, komatxo funtzioa behar da kate baten inguruan komatxoak sortzeko. Adibidez, >zatitzaile gisa erabiliz, hau erabil dezakezu:

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

Kapsulatutako SVG ikono bat ere erabil daiteke . Aplikatu gure CSS propietate pertsonalizatuaren bidez edo erabili Sass aldagaia.

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

Banatzailearen ezarpena ere kendu dezakezu --bs-breadcrumb-divider: '';(CSS propietate pertsonalizatuetako kate hutsak balio gisa zenbatzen dira) edo Sass aldagaia ezar dezakezu $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;

Irisgarritasuna

Ogi-mamiek nabigazioa ematen dutenez, komeni da etiketa esanguratsu bat gehitzea, hala nola elementuan aria-label="breadcrumb"ematen den nabigazio mota deskribatzeko, <nav>baita aria-current="page"multzoko azken elementuari bat aplikatzea uneko orrialdea adierazten duela adierazteko.

Informazio gehiago lortzeko, ikusi WAI-ARIA egile-praktikak breadcrumb eredurako .

Sass

Aldagaiak

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