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ụ:

html
Thử online
<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:

  1. .dropdown: Bao bọc Dropdown.
  2. .dropdown-toggle: Tạo nút kích hoạt Dropdown.
  3. .dropdown-menu: Chứa danh sách các mục.
  4. .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:

html
Thử online
<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ụ:

html
Thử online
<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:

html
Thử online
<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:

html
<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:

html
<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

  1. Đảm bảo khả năng truy cập: Sử dụng các thuộc tính aria như aria-expanded, aria-labelledby để hỗ trợ công cụ đọc màn hình.
  2. Đả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!