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.

Tổng quan

Dấu phân tách được thêm tự động trong CSS thông qua ::beforevà content.

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

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 .