Pan ra’ỹi

Ehechauka moõpa oĩ página ko’áĝagua peteĩ jerarquía navegación ryepýpe omoĩva ijeheguiete umi separador CSS rupive.

Ko páhinape

Tembiecharã

Eipuru peteĩ lista ordenada térã noñeordenáiva umi elemento lista rehegua oñembojoajúva reheve ejapo hag̃ua peteĩ pan ra’ỹi estilo mínima. Eipuru ore utilidad emoĩ hag̃ua estilo adicional reipotáicha.

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

Umi omboja’óva

Umi divisor oñembojoapy ijeheguiete CSS-pe ::beforeha rupive content. Ikatu oñemoambue oñemoambuévo peteĩ CSS jeporupyre tendápegua mbaꞌekuaarã --bs-breadcrumb-divider, térã $breadcrumb-dividerSass mbaꞌekuaarã rupive — ha $breadcrumb-divider-flippedimbojojaha RTL-pe g̃uarã, oñeikotevẽramo. Ñamoĩ por defecto ñande variable Sass-pe, oñemboguapýva peteĩ fallback ramo pe propiedad personalizada-pe. Péicha, rehupyty peteĩ divisor global ikatúva rembogue recompila’ỹre CSS oimeraẽ jave.

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

Oñemoambuévo Sass rupive, oñeikotevẽ función comilla rehegua omoheñói hag̃ua umi comilla peteĩ cadena jerére. Techapyrã, jaipurúvo >divisor ramo, ikatu jaipuru kóva:

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

Ikatu avei ojepuru peteĩ SVG techaukaha oñemboguapýva . Emoĩ ñande CSS mba’ekuaarã jeporupyre rupive, térã eipuru Sass mba’ekuaarã.

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

Ikatu avei eipeꞌa pe divisor ñemboheko --bs-breadcrumb-divider: '';(katupyry nandi oĩva CSS mbaꞌekuaarã jeporupyre-pe ojeipapa peteĩ mbaꞌerepy ramo), térã emohenda Sass mbaꞌekuaarã $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;

Accesibilidad rehegua

Umi pan miga omeꞌe rupi peteĩ jeguata, iporã oñembojoapy peteĩ etiqueta heꞌiséva haꞌeháicha aria-label="breadcrumb"oñemombeꞌu hag̃ua mbaꞌeichagua jeguatarã oñemeꞌeva <nav>elemento-pe, avei emoĩ peteĩ aria-current="page"mbaꞌe pahaitépe conjunto rehegua ohechauka hag̃ua ohechaukaha página koꞌag̃agua.

Ojeikuaave hag̃ua, ehecha WAI-ARIA Autorización Prácticas pe pan ra’ỹi ra’ãnga rehegua .

Sass rehegua

Variables rehegua

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