in English

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