Top 10 Bootstrap Sidebar đẹp và miễn phí nhất năm 2020


Dưới đây là 10 Bootstrap Sidebar đẹp và miễn phí mà bạn nên sử dụng cho blog, website của mình, được tổng hợp từ CodePen. Vì sử dụng Bootstrap nên các Siderbar này có hỗ trợ responsive giúp cho việc hiển thị trên mobile được tốt nhất.

Sidebar layout

Tác giả: Brenna Veen

Bố cục sidebar của Brenna Veen sẽ rất phù hợp cho một ứng dụng web hiện đại. Như bạn có thể thấy từ ảnh chụp màn hình, sidebar này được đặt ở phía bên trái của trang web. Text màu trắng trên nền màu đen.

DEMO file_downloadDOWNLOAD

Fixed Bootstrap sidebar

Tác giả: Daan Vankerkom

Đây là một Bootstrap Sidebar cố định được tạo bởi Daan Vankerkom. Trong sidebar này, có hai phần menu điều hướng bên dưới tiêu đề. Màu text của menu điều hướng là màu trắng trong khi màu nền là màu đen. Vì vậy, các văn bản trông tươi sáng. Có các iicon nhỏ, thú vị với mỗi menu.

Có một hiệu ứng di chuột mà bạn có thể thấy khi bạn giữ chuột trên các menu. Khi di chuột, màu nền của các menu sẽ chuyển sang màu xanh lam . Thiết kế tổng thể là tốt nhưng nếu bạn muốn, bạn có thể thực hiện một số thay đổi và cố gắng nâng cao thiết kế.

DEMO file_downloadDOWNLOAD

Bootstrap sidebar

Tác giả: Truong Tran

Đây là một Sidebar của một tác giả Việt Nam, trông nó cũng khá thú vị. Và vì là của Việt Nam nên mình cố gắng cho vào danh sách để ủng hộ tác giả

DEMO file_downloadDOWNLOAD

Saitama Bootstrap Sidebar

Tác giả: Rijdzuan Sampoerna

Đây là một mẫu thanh bên tuyệt vời được phát triển bởi người dùng CodePen có tên Rijdzuan Sampoerna. Nó đã được thiết kế bằng Bootstrap. Vì vậy, nó trông đẹp và mát mẻ. Trong thanh bên này, có các menu điều hướng. Có năm mục menu, đó là ‘Bảng điều khiển,‘ Thành phần, ‘Extras,‘ Ứng dụng, và ‘Liên kết. Nếu bạn cần thêm các mục menu, bạn có thể thêm nhiều mục với các văn bản phù hợp. Có một thanh cuộn dọc. Vì vậy, trong trường hợp nếu bạn phải thêm quá nhiều mục trong thanh bên này, người dùng sẽ có thể cuộn xuống danh sách các mục bằng thanh cuộn. Vì vậy, người dùng có thể thấy tất cả các mục menu ngay cả khi chúng không vừa với màn hình thiết bị.

DEMO  DOWNLOAD

Bootstrap Sidebar 2

Tác giả: Luís Fernando Richter

Mẫu thanh bên Bootstrap này của Luís Fernando Richter có các menu điều hướng được chia thành hai phần với các tiêu đề MAIN MENU, và ‘TÙY CHỌN. Sự kết hợp màu sắc được sử dụng trong mẫu này là tuyệt vời. Màu văn bản là màu trắng trong khi màu nền là màu xanh đậm. Có những icon thú vị bên cạnh mỗi mục menu. Những icon này rất phù hợp với màu văn bản. Trên chuột di chuột, màu nền của các mục menu thay đổi thành màu đen.

DEMO file_downloadDOWNLOAD

Bootstrap Sidebar + Navbar

Tác giả: Alexander Guthmann

Ngoài Bootstrap Sidebar, tác giả còn khuyến mại thêm cho các bạn thêm Navibar. Chúng sử dụng Jquery, Bootstrap 4.3 và FontAwesome để tạo các icon đẹp nằm bên trái mỗi một Menu Item.

DEMO file_downloadDEMO & DOWNLOAD

bootstrap sidebar menu 4 admin

Tác giả: Blood

Có lẽ đây là 1 Sidebar của 1 tác giả Trung Quốc, nhìn nó rất bắt mắt. Icon và font chữ đẹp dù mình cũng chả hiểu nội dung của các thanh menu là gì. Nhưng Sidebar này hỗ trợ menu đa cấp rất tiện cho các bạn phân chia các chuyên mục cha/con.

DEMO file_downloadDOWNLOAD

Bootstrap sidebar 1

Tác giả: Patrick Hayes

Đây là một ví dụ thanh bên hiện đại được phát triển bởi Patrick Hayes. Trông rất phong cách. Thanh bên có một số menu điều hướng. Bạn có thể bao gồm các mục phụ trong menu chính. Bạn có thể thêm logo công ty của bạn trên đầu thanh bên. Các mục menu có biểu tượng nhỏ với chúng. Vì vậy, chúng trông hấp dẫn. Các biểu tượng menu bên cạnh các mục menu sẽ giúp người dùng nhanh chóng hiểu được mỗi menu là gì.

DEMO file_downloadDOWNLOAD

Bootstrap SideBar Menu

Tác giả: Hugh Balboa

Đây là Bootstrap Sidebar của tác giả Hugh Balboa được gán tích là Pro. Vậy chắc hẳn phần code của Sidebar này được chau chuốt rất tốt. Nó có 1 button để đống và ẩn (Collapse) sidebar. Rất đang để chúng ta thử.

DEMO file_downloadDOWNLOAD

Untitled Bootstrap Sidebar

Tác giả: Lazy Jones

Nhìn khá giống Sidebar của tác giả Truong Tran, nhưng nó có nhiều thứ hơn như menu hỗ menu đa cấp, thêm các icon. Khi bấm vào để xổ ra menu item con. Nó hoạt động khá là mượt mà, kể các button “Toggle Sidebar”

DEMO file_downloadDOWNLOAD

Nguồn: vinasupport.com

             
SHARE

Bài viết liên quan

mode_edit Bình luận của bạn

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 *

account_circle
web