breadcrumb

Breadcrumb là thành phần điều hướng trên website giúp người dùng xác định vị trí hiện tại và nhanh chóng quay lại các trang cấp cao hơn.

Breadcrumb là gì?

Breadcrumb, hay còn gọi là “đường dẫn phân cấp”, là một dạng navigation UI thường được đặt ở phần đầu của trang web, ngay dưới thanh menu chính. Nó hiển thị đường đi từ trang chủ đến trang hiện tại, ví dụ:

Trang chủ > Sản phẩm > Nội thất > Ghế sofa

Nhờ đó, người dùng dễ dàng nhận biết vị trí hiện tại trong cấu trúc website và có thể quay lại các cấp trên chỉ với một cú nhấp chuột.

breadcrumb

Tại sao Breadcrumb quan trọng?

Cải thiện trải nghiệm người dùng (UX)

Với các website có nhiều cấp danh mục, đặc biệt là sàn thương mại điện tử hoặc website tin tức, breadcrumb giúp người dùng điều hướng nhanh chóng mà không bị lạc trong “mê cung” nội dung.

Giảm tỷ lệ thoát trang (Bounce rate)

Thay vì quay lại bằng nút “Back” hoặc rời khỏi trang, người dùng có thể chọn truy cập trực tiếp vào danh mục cha thông qua breadcrumb. Điều này giữ chân khách hàng ở lại lâu hơn trên website.

Tối ưu SEO

Google thường hiển thị breadcrumb ngay dưới tiêu đề trang trong kết quả tìm kiếm. Điều này không chỉ giúp người dùng hiểu rõ cấu trúc nội dung, mà còn làm tăng tỷ lệ nhấp chuột (CTR).

Tiết kiệm không gian điều hướng

Breadcrumb gọn nhẹ, không chiếm nhiều diện tích, nhưng lại cung cấp nhiều giá trị trong việc định hướng.

Các loại Breadcrumb phổ biến

Breadcrumb phân cấp (Hierarchy-based)

• Hiển thị đường dẫn từ trang chủ đến vị trí hiện tại theo cấu trúc thư mục.
• Ví dụ: Trang chủ > Blog > SEO > Breadcrumb là gì?
• Phù hợp với website tin tức, blog, tài liệu.

Breadcrumb theo thuộc tính (Attribute-based)

• Sử dụng cho các website thương mại điện tử, hiển thị thuộc tính sản phẩm.
• Ví dụ: Trang chủ > Giày > Nam > Màu đen > Size 42
• Breadcrumb theo lịch sử (History-based)
• Hiển thị theo hành trình duyệt web của người dùng.

Ví dụ: Trang chủ > Trang vừa xem > Trang hiện tại

Thường ít được dùng vì có thể gây rối nếu hành trình duyệt phức tạp.

Ví dụ HTML Breadcrumb cơ bản

<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Trang chủ</a></li>
<li><a href="/san-pham">Sản phẩm</a></li>
<li><a href="/san-pham/noi-that">Nội thất</a></li>
<li>Ghế sofa</li>
</ol>
</nav>

Kết hợp với CSS, breadcrumb có thể được trình bày trực quan bằng dấu > hoặc icon.

Các loại Breadcrumb phổ biến

Khi nào nên dùng Breadcrumb?

• Website có nhiều cấp phân cấp (E-commerce, Blog, Forum).
• Website cần cải thiện SEO & CTR trên Google.
• Các dự án muốn tối ưu UX bằng cách hỗ trợ điều hướng rõ ràng.

Breadcrumb là công cụ điều hướng nhỏ gọn nhưng mang lại giá trị lớn trong việc nâng cao trải nghiệm người dùng và tối ưu SEO cho website.