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. Possunt mutari per modificationem proprietatis localis CSS consuetudinis --bs-breadcrumb-divider, vel per $breadcrumb-dividerSass variabilis, et $breadcrumb-divider-flippedpro RTL illius parte, si opus fuerit. Dedimus ad Sass variabilis nostro, quod ponitur pro fallacia ad proprietatem consuetudinis. Hoc modo, divisorem globalem possides quod sine recompensatione CSS quovis tempore delendi 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 chordum. 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 aria-current="page"ad ultimum appositionis appositum ad praesentem paginam designandam significandam.

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;