Dropdown trong Bootstrap 5 là một danh sách lựa chọn được ẩn bên trong một nút, liên kết, hoặc bất kỳ thành phần kích hoạt nào khác. Khi người dùng nhấp vào, danh sách sẽ xuất hiện, cung cấp các tùy chọn hoặc thông tin.
Cách sử dụng Dropdown cơ bản
Bootstrap 5 cung cấp lớp .dropdown để tạo Dropdown, cùng với các lớp như .dropdown-toggle và .dropdown-menu.
Ví dụ:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Lựa chọn 1</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 2</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 3</a></li>
</ul>
</div>Giải thích:
.dropdown: Bao bọc Dropdown..dropdown-toggle: Tạo nút kích hoạt Dropdown..dropdown-menu: Chứa danh sách các mục..dropdown-item: Áp dụng cho từng mục trong menu.
Vị trí của Dropdown
Bootstrap 5 hỗ trợ nhiều tùy chọn để thay đổi vị trí của Dropdown:
Dropdown bên phải:
Sử dụng lớp .dropdown-menu-end:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Lựa chọn 1</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 2</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 3</a></li>
</ul>
</div>Dropdown với phân nhóm
Bạn có thể thêm divider hoặc tiêu đề để tạo nhóm các mục:
Ví dụ:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="groupedDropdown" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Grouped
</button>
<ul class="dropdown-menu" aria-labelledby="groupedDropdown">
<li><h6 class="dropdown-header">Nhóm 1</h6></li>
<li><a class="dropdown-item" href="#">Mục 1</a></li>
<li><a class="dropdown-item" href="#">Mục 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Nhóm 2</h6></li>
<li><a class="dropdown-item" href="#">Mục 3</a></li>
</ul>
</div>Dropdown trong Navigation
Dropdown cũng có thể được sử dụng trong thanh điều hướng (Navbar) hoặc thanh công cụ (Toolbar):
Dropdown trong Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Lựa chọn 1</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Dropdown với JavaScript
Bạn có thể điều khiển Dropdown thông qua JavaScript API của Bootstrap 5.
Tạo Dropdown bằng JavaScript:
<button id="jsDropdown" class="btn btn-primary dropdown-toggle" type="button">
Dropdown JavaScript
</button>
<ul class="dropdown-menu" id="jsDropdownMenu">
<li><a class="dropdown-item" href="#">Lựa chọn 1</a></li>
<li><a class="dropdown-item" href="#">Lựa chọn 2</a></li>
</ul>
<script>
var dropdownToggle = document.getElementById('jsDropdown');
var dropdownMenu = new bootstrap.Dropdown(dropdownToggle);
dropdownToggle.addEventListener('click', function () {
dropdownMenu.toggle();
});
</script>Tùy chỉnh Dropdown
1. Kích thước tùy chỉnh
Bạn có thể thay đổi kích thước menu bằng cách thêm các lớp như .dropdown-menu-lg hoặc .dropdown-menu-sm.
2. Màu sắc
Sử dụng các lớp tiện ích của Bootstrap để thay đổi màu sắc:
<ul class="dropdown-menu bg-primary text-white">
<li><a class="dropdown-item text-white" href="#">Lựa chọn 1</a></li>
</ul>Lưu ý khi sử dụng Dropdown
- Đảm bảo khả năng truy cập: Sử dụng các thuộc tính
arianhưaria-expanded,aria-labelledbyđể hỗ trợ công cụ đọc màn hình. - Đảm bảo hoạt động trên di động: Dropdown được tối ưu hóa cho cả màn hình lớn và nhỏ, nhưng hãy kiểm tra trên nhiều thiết bị để đảm bảo giao diện hoạt động đúng.
Kết luận
Dropdowns trong Bootstrap 5 là một thành phần mạnh mẽ và dễ sử dụng, giúp bạn tạo giao diện chuyên nghiệp và linh hoạt. Từ danh sách lựa chọn đơn giản đến phân nhóm hoặc tích hợp trong Navbar, bạn có thể áp dụng Dropdown trong nhiều trường hợp thực tế.
Hãy tiếp tục theo dõi CodeTutHub để học thêm các thành phần Bootstrap 5 hữu ích khác. Nếu bạn có bất kỳ câu hỏi hoặc ý kiến đóng góp, hãy để lại bình luận nhé!
Chúc bạn học tốt!
0 Bình luận