Breadcrumb

Cho biết vị trí của trang hiện tại trong hệ thống phân cấp điều hướng tự động thêm dấu phân cách qua CSS.

Trên trang này

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

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 Thực hành tác giả WAI-ARIA cho mẫu đường dẫn .

Sass

Biến

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