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.

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>

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.

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>

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.

Paggamit sa naka-embed nga SVG

Ang pag-inlining sa SVG isip data nga URI nagkinahanglan sa URL nga makalingkawas sa pipila ka mga karakter, ilabina <, >ug #. Mao nga ang $breadcrumb-dividervariable gipasa sa among escape-svg()Sass function . Kung gigamit ang CSS custom property, kinahanglan nimo nga i-eskapo ang URL sa imong SVG sa imong kaugalingon. Basaha ang mga pagpatin-aw ni Kevin Weber sa CodePen alang sa detalyado nga kasayuran kung unsa ang makaikyas.

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

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

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

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 ARIA Authoring Practices Guide nga pattern sa breadcrumb .

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga breadcrumb karon naggamit sa mga lokal nga CSS variables .breadcrumbpara sa gipaayo nga real-time nga customization. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

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