Breadcrumb

Ipaila ang lokasyon sa kasamtangan nga panid sulod sa usa ka hierarchy sa nabigasyon nga awtomatiko nga nagdugang mga separator pinaagi sa CSS.

Niini nga panid

Pananglitan

Gamit ug ordered or unordered list with linked list items to create a minimally styled breadcrumb. Gamita ang among mga utilities aron makadugang ug dugang nga mga istilo kung gusto.

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

Mga dibisyon

Ang mga divider awtomatik nga gidugang sa CSS pinaagi sa ::beforeug content. Mahimo kining usbon pinaagi sa pag-usab sa lokal nga CSS custom property --bs-breadcrumb-divider, o pinaagi sa $breadcrumb-dividerSass variable — ug $breadcrumb-divider-flippedpara sa RTL counterpart niini, kon gikinahanglan. Nag-default kami sa among Sass variable, nga gitakda isip fallback sa custom property. Niining paagiha, makakuha ka usa ka global divider nga mahimo nimong i-override nga wala’y pag-recompile sa CSS bisan unsang orasa.

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

Kung nagbag-o pinaagi sa Sass, ang function sa quote gikinahanglan aron makamugna ang mga kinutlo sa palibot sa usa ka hilo. Pananglitan, gamit >ang divider, mahimo nimong gamiton kini:

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

Posible usab nga mogamit usa ka naka- embed nga icon nga SVG . Ibutang kini pinaagi sa among CSS custom property, o gamita ang Sass variable.

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

Mahimo usab nimo nga tangtangon ang setting sa divider --bs-breadcrumb-divider: '';(walay sulod nga mga kuwerdas sa CSS custom nga mga kabtangan isip usa ka bili), o itakda ang Sass variable ngadto sa $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

Tungod kay ang mga breadcrumb naghatag ug nabigasyon, maayo nga ideya nga magdugang ug makahuluganong label sama aria-label="breadcrumb"sa paghubit sa matang sa nabigasyon nga gihatag sa <nav>elemento, ingon man sa paggamit ug aria-current="page"sa kataposang butang sa set aron ipakita nga kini nagrepresentar sa kasamtangang panid.

Para sa dugang nga impormasyon, tan-awa ang WAI-ARIA Authoring Practices para sa pattern sa breadcrumb .

Sass

Mga variable

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