Briwsion Bara

Nodwch leoliad y dudalen gyfredol o fewn hierarchaeth llywio sy'n ychwanegu gwahanyddion yn awtomatig trwy CSS.

Ar y dudalen hon

Enghraifft

Defnyddiwch restr drefnus neu ddi-drefn gydag eitemau rhestr cysylltiedig i greu briwsion bara â'r steil lleiaf posibl. Defnyddiwch ein cyfleustodau i ychwanegu arddulliau ychwanegol fel y dymunir.

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

Rhanwyr

Mae rhanwyr yn cael eu hychwanegu'n awtomatig yn CSS trwy ::beforea content. Gellir eu newid trwy addasu eiddo arfer CSS lleol --bs-breadcrumb-divider, neu drwy'r $breadcrumb-dividernewidyn Sass - ac $breadcrumb-divider-flippedar gyfer ei gymar RTL, os oes angen. Rydym yn rhagosod i'n newidyn Sass, sy'n cael ei osod fel wrth gefn i'r eiddo arferiad. Fel hyn, byddwch yn cael rhannwr byd-eang y gallwch ei ddiystyru heb ail-grynhoi CSS ar unrhyw adeg.

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

Wrth addasu trwy Sass, mae angen y swyddogaeth dyfynbris i gynhyrchu'r dyfyniadau o amgylch llinyn. Er enghraifft, gan ddefnyddio >fel rhannwr, gallwch ddefnyddio hyn:

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

Mae hefyd yn bosibl defnyddio eicon SVG wedi'i fewnosod . Cymhwyswch ef trwy ein heiddo arferol CSS, neu defnyddiwch y newidyn 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");

Gallwch hefyd gael gwared ar y gosodiad rhannwr --bs-breadcrumb-divider: '';(mae llinynnau gwag mewn priodweddau arfer CSS yn cyfrif fel gwerth), neu osod y newidyn Sass i $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;

Hygyrchedd

Gan fod briwsion bara yn darparu llywio, mae'n syniad da ychwanegu label ystyrlon fel aria-label="breadcrumb"disgrifio'r math o lywio a ddarperir yn yr <nav>elfen, yn ogystal â chymhwyso aria-current="page"i eitem olaf y set i ddangos ei fod yn cynrychioli'r dudalen gyfredol.

I gael rhagor o wybodaeth, gweler Arferion Awduro WAI-ARIA ar gyfer y patrwm briwsion bara .

Sass

Newidynnau

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