Breadcrumb

Thí dụ

Sử dụng danh sách có thứ tự hoặc không có thứ tự với các mục danh sách được liên kết để tạo đường dẫn theo kiểu tối thiểu. Sử dụng các tiện ích của chúng tôi để thêm các kiểu bổ sung như mong muốn.

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

Ngăn cách

Các bộ phân chia được tự động thêm vào trong CSS thông qua ::beforevà content. Chúng có thể được thay đổi bằng cách sửa đổi thuộc tính tùy chỉnh CSS cục bộ --bs-breadcrumb-dividerhoặc thông qua $breadcrumb-dividerbiến Sass - và $breadcrumb-divider-flippedcho đối tác RTL của nó, nếu cần. Chúng tôi đặt mặc định cho biến Sass của mình, được đặt làm dự phòng cho thuộc tính tùy chỉnh. Bằng cách này, bạn sẽ có được một dải phân cách toàn cục mà bạn có thể ghi đè mà không cần biên dịch lại CSS bất kỳ lúc nào.

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

Khi sửa đổi thông qua Sass, hàm trích dẫn được yêu cầu để tạo các dấu ngoặc kép xung quanh một chuỗi. Ví dụ: sử dụng >làm dải phân cách, bạn có thể sử dụng:

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

Cũng có thể sử dụng biểu tượng SVG được nhúng . Áp dụng nó thông qua thuộc tính tùy chỉnh CSS của chúng tôi hoặc sử dụng biến 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='%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>");

Bạn cũng có thể xóa cài đặt bộ chia --bs-breadcrumb-divider: '';(chuỗi trống trong thuộc tính tùy chỉnh CSS được tính là một giá trị) hoặc đặt biến Sass thành $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;

Khả năng tiếp cận

Vì breadcrumbs cung cấp điều hướng, nên bạn nên thêm một nhãn có ý nghĩa, chẳng hạn như aria-label="breadcrumb"để mô tả loại điều hướng được cung cấp trong <nav>phần tử, cũng như áp dụng một aria-current="page"mục cuối cùng của tập hợp để chỉ ra rằng nó đại diện cho trang hiện tại.

Để biết thêm thông tin, hãy xem mẫu đường dẫn Hướng dẫn Thực hành Tác giả ARIA .

CSS

Biến

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, breadcrumbs hiện sử dụng các biến CSS cục bộ trên .breadcrumbđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

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

Biến Sass

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