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.

html

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

html

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

Using embedded SVG

Inlinere SVG ut notitia URI requirit URL ut paucas notas, notissime <, effugiat >et #. Quam ob rem $breadcrumb-dividervariabilis munus nostrum escape-svg()Sass transmittitur . Cum CSS consuetudine possessionis utens, URL debes evadere tuum SVG in tuo. Read Kevin Weber explanations on CodePen for detailed information on what to escape.

html

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

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

html

<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 magis notitia, videre ARIA Authoring Practices Guide panum exemplar .

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutionis CSS variabilium accedunt, micas nunc locales CSS variabiles adhibent .breadcrumbad auctam realem-temporis css. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

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;