Bài 8: Sử dụng Breadcrumb trong Bootstrap

Bài 8: Sử dụng Breadcrumb trong Bootstrap

Breadcrumb trong Bootstrap dùng để tạo phân cấp, hay là đường dẫn, bạn cũng hay thường gặp ở trên các trang web.

Ở bài trước chúng ta đã tìm hiểu về Badges trong Bootstrap, hôm nay hãy cùng sonnguyenaz.com tiếp tục khám phá Components tiếp theo nhé.

Breadcrumb trong Bootstrap trên website cho chúng ta biết vị trí của trang hiện tại đang ở phân cấp nào. Ví dụ ta có Trang chủ>Blog>Bootstrap 2023 thì trang đang xem là Bootstrap 2023 nằm trong Blog Blog nằm trong Trang chủ.

mau-breadcrumb-bootstrap

Ví dụ về Breadcrumb trong Bootstrap

Để tạo một Breadcrumb đơn giản bạn chỉ cần thêm vào đoạn code như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Cấp 1 -->
	<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Trang chủ</li>
  </ol>
</nav>
<!-- Cấp 2 -->
<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">Blog</li>
  </ol>
</nav>
<!-- Cấp 3 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#">Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap 2023</li>
  </ol>
</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

mau-breadcrumb-don-gian

Như ví dụ trên thì ta đã tạo được 1 Breadcrumb đơn giản được lần lượt phân cấp như trong hình.

Với aria-current=”page” được định nghĩa cho liên kết cuối cùng, và khi đó người dùng sẽ biết được đây chính là trang hiện tại mà bạn đang xem.

Để tạo dải phân cách trong Breadcrumb chúng ta có thể sử dụng Icon của Bootstrap, nếu chưa biết cách sử dụng icon thì mình có hướng dẫn trong bài này rồi nhé: Xem bài Alert trong Bootstrap.

Chúng ta sẽ sử dụng thuộc tính: –bs-breadcrumb-divider để tạo dải phân cách bằng icon sử dụng thẻ <svg>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
		<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
		<li class="breadcrumb-item"><a href="#">Blog</a></li>
		<li class="breadcrumb-item active" aria-current="page">Bootstrap 2023</li>
		</ol>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được là:

mau-breadcrumb-su-dung-dai-phan-cach-bang-icon

Nếu trong trường hợp bạn không cần đánh dấu bằng dải phân cách thì chỉ cần bỏ trống thuộc tính –bs-breadcrumb-divider:””;

Lời kết

Về cơ bản thì Breadcrumb Bootstrap được hiểu đơn giản bằng các ví dụ trên. Chúng ta thường gặp nó khi bạn vào bất kỳ một trang web hay một bài viết, chuyên mục nào đó trên website để biết ta đang xem ở nhánh nội dung nào.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *