Trong series học Bootstrap 5 trên CodeTutHub, hôm nay chúng ta sẽ tìm hiểu về Breadcrumb - một thành phần UI đơn giản nhưng cực kỳ hữu ích. Breadcrumb giúp hiển thị đường dẫn điều hướng, giúp người dùng dễ dàng biết được vị trí của họ trong cấu trúc của website.

Breadcrumb là gì?

Breadcrumb là một chuỗi các liên kết hiển thị đường dẫn từ trang chủ đến trang hiện tại của người dùng. Thành phần này thường được sử dụng trong các trang web hoặc ứng dụng có cấu trúc phân cấp phức tạp để cải thiện trải nghiệm người dùng.

Ví dụ về một Breadcrumb cơ bản:

html
Thử online
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Trang chủ</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item active" aria-current="page">Danh mục</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#">Danh mục</a></li>
    <li class="breadcrumb-item active" aria-current="page">Trang hiện tại</li>
  </ol>
</nav>

Cách sử dụng Breadcrumb trong Bootstrap 5

Bootstrap 5 cung cấp lớp .breadcrumb để tạo Breadcrumb. Thành phần này được đặt trong một thẻ <nav> với thuộc tính aria-label="breadcrumb" để đảm bảo khả năng truy cập tốt hơn.

1. Cấu trúc cơ bản

html
Thử online
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#">Danh mục</a></li>
    <li class="breadcrumb-item active" aria-current="page">Trang hiện tại</li>
  </ol>
</nav>
  • <nav aria-label="breadcrumb">: Thẻ <nav> bao bọc breadcrumb, sử dụng aria-label để cải thiện khả năng truy cập.
  • <ol class="breadcrumb">: Sử dụng thẻ danh sách có thứ tự <ol> với lớp .breadcrumb.
  • <li class="breadcrumb-item">: Từng mục trong breadcrumb.

2. Breadcrumb không chứa liên kết

Nếu bạn chỉ muốn hiển thị đường dẫn mà không cần liên kết:

html
Thử online
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Trang chủ</li>
    <li class="breadcrumb-item">Danh mục</li>
    <li class="breadcrumb-item active" aria-current="page">Trang hiện tại</li>
  </ol>
</nav>

3. Tùy chỉnh với Bootstrap 5

Breadcrumb trong Bootstrap 5 dễ dàng tùy chỉnh bằng cách thay đổi CSS hoặc thêm các lớp bổ sung.

Sử dụng kiểu phân tách tùy chỉnh

Bạn có thể thay đổi ký hiệu phân tách mặc định (/) bằng CSS:

html
Thử online
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#">Danh mục</a></li>
    <li class="breadcrumb-item active" aria-current="page">Trang hiện tại</li>
  </ol>
</nav>

<style>
  .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
    padding: 0 0.5rem;
  }
</style>

4. Breadcrumb trong giao diện tối (Dark Mode)

Để sử dụng Breadcrumb trong nền tối, bạn chỉ cần điều chỉnh màu chữ của các liên kết và phân tách:

html
Thử online
<nav aria-label="breadcrumb" class="bg-dark p-3">
  <ol class="breadcrumb text-light">
    <li class="breadcrumb-item"><a href="#" class="text-white">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Danh mục</a></li>
    <li class="breadcrumb-item active text-light" aria-current="page">Trang hiện tại</li>
  </ol>
</nav>

Tích hợp JavaScript với Breadcrumb

Nếu bạn muốn làm cho Breadcrumb trở nên linh động hơn (ví dụ: hiển thị nội dung dựa trên cấu trúc URL), bạn có thể kết hợp với JavaScript.

Tự động tạo Breadcrumb từ URL

html
Thử online
<nav aria-label="breadcrumb">
  <ol class="breadcrumb" id="dynamic-breadcrumb"></ol>
</nav>

<script>
  const breadcrumb = document.getElementById("dynamic-breadcrumb");
  const path = location.pathname.split('/').filter(segment => segment);
  let html = `<li class="breadcrumb-item"><a href="/">Trang chủ</a></li>`;
  
  path.forEach((segment, index) => {
    if (index === path.length - 1) {
      html += `<li class="breadcrumb-item active" aria-current="page">${segment}</li>`;
    } else {
      html += `<li class="breadcrumb-item"><a href="/${segment}">${segment}</a></li>`;
    }
  });
  
  breadcrumb.innerHTML = html;
</script>

Kết quả: Breadcrumb sẽ tự động hiển thị dựa trên URL.

Một số lưu ý khi sử dụng Breadcrumb

  1. Đơn giản và dễ hiểu: Breadcrumb nên ngắn gọn, tránh làm người dùng rối mắt.
  2. Sử dụng liên kết hợp lý: Chỉ sử dụng liên kết cho các mục trung gian, không cần thiết cho mục cuối cùng (trang hiện tại).
  3. Khả năng truy cập: Đảm bảo sử dụng thuộc tính aria-label và aria-current.

Kết luận

Breadcrumb là một công cụ tuyệt vời để cải thiện trải nghiệm điều hướng cho người dùng. Với Bootstrap 5, bạn có thể tạo Breadcrumb nhanh chóng, dễ dàng và tùy chỉnh linh hoạt. Hãy thử áp dụng Breadcrumb trong dự án của bạn để tăng tính chuyên nghiệp và khả năng sử dụng!

CodeTutHub hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng Breadcrumb trong Bootstrap 5. Đừng quên theo dõi series học Bootstrap 5 để cập nhật thêm nhiều thành phần thú vị nhé!

Chúc bạn học tốt!