Thërrim buke

Tregoni vendndodhjen e faqes aktuale brenda një hierarkie lundrimi që shton automatikisht ndarës përmes CSS.

Në këtë faqe

Shembull

Përdorni një listë të renditur ose të parregulluar me artikuj të lidhur të listës për të krijuar një copë buke të stiluar minimalisht. Përdorni shërbimet tona për të shtuar stile shtesë sipas dëshirës.

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

Ndarësit

Ndarësit shtohen automatikisht në CSS përmes ::beforedhe content. Ato mund të ndryshohen duke modifikuar një pronë lokale të personalizuar të CSS --bs-breadcrumb-divider, ose përmes $breadcrumb-dividerndryshores Sass - dhe $breadcrumb-divider-flippedpër homologun e saj RTL, nëse është e nevojshme. Ne e paracaktojmë variablin tonë Sass, i cili vendoset si një kthim prapa në vetinë e personalizuar. Në këtë mënyrë, ju merrni një ndarës global që mund ta anashkaloni pa e rikompiluar CSS në çdo kohë.

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

Kur modifikoni nëpërmjet Sass, funksioni i kuotës kërkohet për të gjeneruar thonjëza rreth një vargu. Për shembull, duke përdorur >si ndarës, mund të përdorni këtë:

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

Është gjithashtu e mundur të përdoret një ikonë e integruar SVG . Aplikojeni atë nëpërmjet pronës sonë të personalizuar CSS ose përdorni variablin 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");

Ju gjithashtu mund të hiqni cilësimin e ndarësit --bs-breadcrumb-divider: '';(vargjet e zbrazëta në vetitë e personalizuara të CSS llogariten si vlerë) ose të vendosni ndryshoren Sass në $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;

Aksesueshmëria

Meqenëse breadcrumbs ofrojnë një lundrim, është një ide e mirë të shtoni një etiketë kuptimplotë aria-label="breadcrumb"për të përshkruar llojin e navigimit të dhënë në <nav>element, si dhe të aplikoni një aria-current="page"në artikullin e fundit të grupit për të treguar se ai përfaqëson faqen aktuale.

Për më shumë informacion, shihni praktikat e autorizimit të WAI-ARIA për modelin e bukës .

Sass

Variablat

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