نان وردکراو

شوێنی لاپەڕەی ئێستا لە ناو پلەبەندییەکی گەشتکردندا نیشان بدە کە بە شێوەیەکی ئۆتۆماتیکی جیاکەرەوەکان لە ڕێگەی 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>

گۆڕینی جیاکەرەوە

جیاکەرەوەکان بە شێوەیەکی ئۆتۆماتیکی لە CSS لە ڕێگەی ::beforeو content. دەتوانرێت بە گۆڕانکاری بگۆڕدرێن $breadcrumb-divider. فەنکشنی quote پێویستە بۆ دروستکردنی quotes لە دەوری ڕستەیەک، بۆیە ئەگەر >وەک جیاکەرەوە بتەوێت دەتوانیت ئەمە بەکاربهێنیت:

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

هەروەها دەتوانرێت ئایکۆنی SVG ی جێگیرکراوی base64 بەکاربهێنرێت :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

دەتوانرێت جیاکەرەوەکە لاببرێ بە دانانی $breadcrumb-dividerلەسەر none:

$breadcrumb-divider: none;

دەستڕاگەیشتن

بەو پێیەی نانە وردکراوەکان گەشتێک دابین دەکەن، بیرۆکەیەکی باشە کە ناوێکی مانادار زیاد بکەیت وەک aria-label="breadcrumb"وەسفکردنی جۆری گەشتکردن کە لە <nav>توخمەکەدا دابین کراوە، هەروەها بەکارهێنانی an aria-current="page"بۆ دوا بابەتی کۆمەڵەکە بۆ ئەوەی ئاماژە بەوە بکات کە نوێنەرایەتی لاپەڕەی ئێستا دەکات.

بۆ زانیاری زیاتر، سەیری شێوازەکانی نووسینی WAI-ARIA بکە بۆ نەخشی نانە وردکراوەکان .