Bootstrap Breadcrumb

Trong hướng dẫn này, bạn sẽ học cách tạo Breadcrumb với Bootstrap.

Tạo Breadcrumb với Bootstrap

Breadcrumb là một lược đồ điều hướng cho biết vị trí của trang hiện tại cho người dùng trong một trang web hoặc ứng dụng. Breadcrumb có thể nâng cao đáng kể khả năng truy cập của một trang web có số lượng trang lớn hoặc hệ thống phân cấp điều hướng phức tạp.

Bạn có thể tạo bố cục breadcrumbs tĩnh với Bootstrap đơn giản bằng cách sử dụng lớp .breadcrumb trên danh sách có thứ tự, như được minh họa trong ví dụ sau:

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item active">Accessories</li>
    </ol>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Dấu phân tách đường dẫn mặc định là /. Tuy nhiên, bạn có thể thay đổi nó bằng một chút CSS tùy chỉnh, ví dụ: nếu bạn muốn sử dụng > làm dấu phân tách, bạn có thể áp dụng như sau:

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

Kết quả của ví dụ trên sẽ giống như sau:

Mẹo: Các dấu phân tách bên trong thành phần breadcrumb được thêm tự động qua CSS thông qua phần tử giả ::before và thuộc tính content.

Bootstrap • Bootstrap Cơ Bản