Breadcrumb

Cihê rûpela heyî di nav hiyerarşiyek navîgasyonî de destnîşan bikin ku bixweber bi riya CSS veqetankeran zêde dike.

Li ser vê rûpelê

Mînak

Lîsteyek rêzkirî an nerêkûpêk bi hêmanên navnîşa pêvekirî bikar bînin da ku nanek bi şêweya hindiktirîn biafirînin. Karûbarên me bikar bînin ku li gorî xwestinê şêwazên din lê zêde bikin.

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

Dividers

Dabeş bixweber di nav CSS de têne zêdekirin ::beforeû bi content. Ew dikarin bi guheztina taybetmendiyek xwerû ya CSS-ê ya herêmî --bs-breadcrumb-divider, an bi $breadcrumb-dividerguhêrbara Sass ve werin guheztin - û $breadcrumb-divider-flippedheke hewce be ji bo hevtayê wê RTL. Em guhêrbara xweya Sass-ê ya ku wekî paşvekêşana taybetmendiya xwerû hatî danîn vedihewînin. Bi vî rengî, hûn dabeşkerek gerdûnî digirin ku hûn dikarin di her kêliyê de bêyî ji nû ve berhevkirina CSS-ê bişopînin.

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

Dema ku bi riya Sass ve tê guheztin, fonksiyona quote hewce ye ku li dor rêzek nîgaran çêbike. Mînakî, >wekî dabeşker bikar bînin, hûn dikarin vê bikar bînin:

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

Di heman demê de gengaz e ku meriv îkonek SVG-ya pêvekirî bikar bîne . Wê bi navgîniya taybetmendiya meya xwerû ya CSS-ê bicîh bikin, an guhêrbar Sass bikar bînin.

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

Her weha hûn dikarin mîhenga dabeşkerê rakin --bs-breadcrumb-divider: '';(rêzikên vala yên di taybetmendiyên xwerû yên CSS de wekî nirxek têne hesibandin), an guhêrbar Sass li ser $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;

Gihîştina

Ji ber ku nanpêj navîgasyonek peyda dike, fikrek baş e ku meriv etîketek watedar lê zêde bike wekî aria-label="breadcrumb"celebê navîgasyon ku di <nav>hêmanê de hatî peyda kirin rave bike, û her weha an aria-current="page"li ser xala paşîn a setê bicîh bike da ku nîşan bide ku ew rûpela heyî temsîl dike.

Ji bo bêtir agahdarî, ji bo nimûneya nanê li Pratîkên Nivîskariya WAI-ARIA binêre .

Sass

Variables

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