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.

Thí dụ

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

Thay đổi dấu phân cách

Dấu phân cách được thêm tự động trong CSS thông qua ::beforevà content. Chúng có thể được thay đổi bằng cách thay đổi $breadcrumb-divider. Hàm trích dẫn là cần thiết để tạo các dấu ngoặc kép xung quanh một chuỗi, vì vậy nếu bạn muốn >làm dấu phân tách, bạn có thể sử dụng hàm này:

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

Cũng có thể sử dụng biểu tượng SVG nhúng base64 :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Có thể xóa dấu phân cách bằng cách đặt $breadcrumb-dividerthành none:

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