Breadcrumb

Indica pagina hodiernae situm intra hierarchiam navigationis quae sponte addit separatores per CSS.

In hac pagina

Exemplum

Utere indice ordinato vel inordinato cum indice coniuncto, ut minimum efficiat crumbam vocatam. Utilitatibus nostris utere ut addas stylos additos prout voluimus.

<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

Automatice divisores in CSS per ::beforeet content. Mutari possunt per modificationem proprietatis localis CSS consuetudinis --bs-breadcrumb-divider, vel per $breadcrumb-dividerSass variabilis - et $breadcrumb-divider-flippedpro RTL illius parte, si opus fuerit. Nos nostro Sas variabili defaltam facimus, quod quasi fallimentum proprietatis consuetudinis constituitur. Hoc modo, divisorem globalem accipis quod sine recompensatione CSS quovis tempore superari potes.

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

Cum modificando per Sass, munus quotum opus est generare quotes circa chordas. Exempli gratia, utendo >divisore, hoc uti potes;

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

Potest etiam icone SVG infixa . Applicare per proprietatem nostram CSS consuetudinis, vel uti Sass variabilis.

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

Potes etiam dividentem occasum tollere --bs-breadcrumb-divider: '';(chordas vacuas in CSS consuetudine proprietatum ut valorem aestimat), vel in Sass variabilis collocans $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;

Accessibility

Cum medulla panis navigationem praebeat, utilem est pittacium significantem addere ut aria-label="breadcrumb"genus navigationis in <nav>elemento describendum, necnon applicando aria-current="page"ultimo statuto ad significandum praesentem paginam repraesentet.

Pro maiori, vide WAI-ARIA Auctoring Exercitia ad exemplar panis panis .

Sass

Variabilium

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