Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Breadcrumb Là Gì? Những Ví Dụ Breadcrumb Đẹp Trong Bootstrap

Breadcrumb Là Gì? Những Ví Dụ Breadcrumb Đẹp Trong Bootstrap


Ngày 17 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu cách xây dựng Breadcrumb snippet bằng cách sử dụng HTML, CSS, Javascript và Bootstrap nhé!


Breadcrumb Là Gì?

Breadcrumb là một loại sơ đồ điều hướng thứ cấp trong cấp trong trang web để giúp người dùng cải thiện các thao tác tìm kiếm và hiểu hơn về sơ đồ, các thành phần mà bạn phân bổ trong trang web. Ví dụ như trang web bán hàng của bạn có nhiều sản phẩm và được chia thành nhiều loại sản phẩm khác nhau thì bạn nên sử dụng component này. Chúng ta nên sử dụng Breadcrumb như một tiện ích bổ sung chứ không nên thay thế thanh điều hướng chính (thường là component navbar) trong trang web.

Để hiểu rõ hơn bạn xem ví dụ về trang web Dell khi sử dụng breadcrumb dưới đây nha:

Ví dụ về breadcrumb bằng trang web Dell

Ở ví dụ trên, mình có cần một số lưu ý nhỏ là các biểu tượng (icon) thường được sử dụng trong breadcrumb vì nó dễ dàng nhận biết để phân biết các danh mục trong component này như danh mục cha > danh mục con hay danh mục cha / danh mục con... Do nó chỉ là tính năng hỗ trợ nên kích thước không nên quá lớn và phải ít nổi bật hơn so với thanh điều hướng chính (component navbar). Vị trí mà bạn nên đặt breadcrumb là phần trên của trang nằm bên dưới so với thanh điều hướng chính và thường được bố trí theo hướng nằm ngang.

Bây giờ mình sẽ giới thiệu tiếp một số component Breadcrumb được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Các Ví Dụ Về Breadcrumb

Flat CSS3 Breadcrumb:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 1

Breadcrumb này được thiết kế theo phong cách Flat. Nó là xu hướng thiết kế sử dụng các hình dạng và biểu tượng phẳng như hình chữ nhật, hình tròn, hình tam giác... mà không sử dụng đến các yếu tố không cần thiêt như gradients, shadow... Việc kết hợp thêm icon vào mỗi liên kết giúp làm rõ nội dung và mục đích của liên kết hơn. Do chỉ sử dụng HTML, CSS nên bạn có thể áp dụng rộng rãi cho nhiều loại trang web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Flat CSS3 Breadcrumb by Fırat çiftçi (@firatcftc) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Flat CSS3 Breadcrumb.

Breadcrumbs:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 2

Theo mình thấy điều mà giúp breadcrumb này nổi bật là việc kết hợp hài hòa màu sắc vào trong bố cục và nó cũng được dùng để phân biệt các mục trong breadcrumb. Component này nên được sử dụng trong các trang bán hàng thương mại điện tử hay trang web công ty mà việc sử dụng màu sắc để làm nổi bật nội dung cũng như khuyến khích tăng sự tương tác của người dùng. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Breadcrumbs by tomek8899 (@tomek8899) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Breadcrumbs.

Force Framework Breadcrumb:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 3

Đây là một tập hợp các loại breadcrumbs được xây dựng bằng HTML, CSS giúp bạn có thể đa dạng, phong phú trong việc lựa chọn sử dụng vào bố cục cũng như thiết kế của trang web. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Force Framework breadcrumb style modified CSS by Nishant Dogra (@mrdogra007) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Force Framework Breadcrumb.

Snippet Breadcrumbs:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 4

Đây là một tập hợp các loại breadcrumbs khác được xây dựng bằng HTML, CSS và Bootstrap 4 giúp bạn vừa có thể tìm hiểu thêm về component này cũng như áp dụng vào thực tế để xây dựng trang web. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Snippet Breadcrumbs(source from bootstrapious) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Snippet Breadcrumbs.

Breadcrumbs 2:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 5

Breadcrumb này được thiết kế theo phong cách đơn giản với mục đích là miêu tả các bước hành động thường được sử dụng trong các trang thương mại điện tử như khi đặt hàng thì bạn nhập thông tin cá nhân rồi chuyển sang bước chọn phương thức thanh toán... Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Крошки | Breadcrumbs by Axelaredz (@axelaredz) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Breadcrumbs 2.

EXPANDABLE BREADCRUMBS:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 6

Breadcrumb này cũng được thiết kế giống ở trên nhưng điểm khác biệt là bạn có thể ẩn nội dung để giảm diện tích trang đặc biệt là trên môi trường mobile và nó chỉ xuất hiện khi người dùng hover vào từng danh mục.Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen zglJf by Phelipe M Peres (@phemestre) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: EXPANDABLE BREADCRUMBS.

Cutup #6 Breadcrumbs:

BreadCrumb xây dựng bằng HTML, CSS và Bootstrap Phần 7

Breadcrumb này thiết kế đơn giản được xây dựng bằng HTML, CSS với cấu trúc code dễ hiểu giúp bạn có thể tinh chỉnh tùy theo ý muốn của mình. Điểm đặc biệt của component này là sử dụng font chữ độc đáo và hiệu ứng chuyển màu khi người dùng hover vào từng danh mục. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Cutup #6 Breadcrumbs by nana (@nana8) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Cutup #6 Breadcrumbs.

Breadcrumbs 3:

BreadCrumb xây dựng bằng HTML, CSS Phần 8

Breadcrumb này thiết kế đơn giản lấy màu trắng làm chủ đạo và điểm nổi bật cúa nó sử dụng hiệu ứng đổ bóng(shadow) và chuyển màu khi người dùng hover. Do được xây dựng bằng HTML, CSS nên bạn có thể áp dụng cho nhiều loại bố cục, thiết kế web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen breadcrumb by Bram (@brampeirs) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Breadcrumbs 3.

Tiny CSS3 Round Breadcrumb:

BreadCrumb xây dựng bằng HTML, CSS Phần 9

Nếu bạn thích thiết kế theo phong cách mới lạ và mang lai cảm giác thú vị cho người dùng thì bạn nên sử dụng component này. Nó sử dụng hình dạng tròn giúp người dùng tập trung nội dung hơn và hiệu ứng mở rộng danh mục khi người dùng hover giúp tiết kiệm diện tích cho trang web. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Tiny CSS3 Round Breadcrumb by Renaud Tertrais (@renaudtertrais) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Tiny CSS3 Round Breadcrumb.

Awesome Bootstrap Button Extension:

BreadCrumb xây dựng bằng HTML, CSS Phần 10

Breadcrum này được thiết kế bằng component button trong Bootstrap với vài chi tiết thay đổi nhỏ trong CSS giúp bạn có thể áp dụng hầu như đa số các thiết kế và bố cục trang web có hỗ trợ Bootstrap. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi breadcrum này được hiển thị trên web ở dưới đây nhé:

See the Pen Awesome bootstrap button extension by Pico Boero (@picoboero) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Awesome Bootstrap Button Extension.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Breadcrumb cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!