Dropdown Bootstrap là gì: Hướng dẫn cách dùng chi tiết cho người mới

Trong lập trình giao diện web, danh sách tùy chọn là thành phần quen thuộc giúp người dùng lựa chọn nhanh chóng và chính xác giữa các phương án có sẵn. Bootstrap hỗ trợ hai cách phổ biến để tạo danh sách tùy chọn là select và dropdown. Dù trông giống nhau, nhưng chúng có mục đích sử dụng, khả năng tùy biến và cơ chế hoạt động rất khác biệt. 

Đọc bài viết này để hiểu rõ:

• Dropdown trong Bootstrap là gì? Có gì khác với Select Bootstrap?
• Cách sử dụng dropdown trong Bootstrap và các lưu ý cần biết
• Bài tập luyện tập sử dụng select và dropdown trong Bootstrap

Tổng quan về Dropdown trong Bootstrap

Dropdown là một thành phần giao diện trong Bootstrap cho phép hiển thị các lớp phủ theo ngữ cảnh, thường là danh sách các liên kết hoặc nút hành động. Dropdown được thiết kế để có thể bật/tắt thông qua thao tác nhấp chuột. 

Ví dụ một dropdown cơ bản:

<div class="dropdown">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

</div>

Kết quả hiển thị:

Khả năng tương tác của dropdown được kích hoạt bởi plugin JavaScript của Bootstrap, giúp xử lý việc hiển thị, ẩn và định vị dropdown một cách mượt mà. Để đạt được điều đó, Bootstrap sử dụng một thư viện mạnh mẽ có tên là Popper.js, thư viện này cung cấp tính năng định vị động và đảm bảo dropdown không bị tràn ra ngoài khung nhìn (viewport).

Lưu ý: Nếu bạn dùng Bootstrap ở dạng tách rời, hãy đảm bảo thêm popper.min.js trước bootstrap.min.js. Hoặc đơn giản hơn, dùng bản bootstrap.bundle.min.js vì đã tích hợp sẵn Popper.

Các loại dropdown trong Bootstrap

Single button dropdown

Đây là loại dropdown đơn giản nhất, chỉ sử dụng một nút để mở menu. Ví dụ về cú pháp:

<div class="dropdown">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>

</div>

Kết quả:

Split button dropdown

Đây là một dạng biến thể của dropdown. Khác với dropdown thông thường, nút chính chỉ dùng để mở menu, Split button cho phép cấu hình sự kiện click cho cả nút chính. Cấu tạo của Split button dropdown gồm 2 phần:

• Một nút chính (thực hiện hành động)
• Một nút nhỏ bên phải để mở menu

Ví dụ:

<div class="btn-group">

   <button type="button" class="btn btn-danger">Nút chính</button>
   <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
   </ul>

</div>

Kết quả:

Dropdown trong Navbar

Dropdown có thể tích hợp trực tiếp trong thanh điều hướng (navbar), thường dùng để nhóm các mục điều hướng phụ. Đặc biệt, các dropdown trong navbar không sử dụng Popper.js vì không cần định vị động. Ví dụ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Logo</a>
      <div class="collapse navbar-collapse">
       <ul class="navbar-nav me-auto">
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
             Menu
           </a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Trang con 1</a></li>
             <li><a class="dropdown-item" href="#">Trang con 2</a></li>
           </ul>
         </li>
       </ul>
     </div>
   </div>
 </nav>

Kết quả:

Các cách định dạng dropdown Bootstrap

Dropdown là một component UI độc lập trong Bootstrap, thường dùng cho menu, điều hướng, hoặc các hành động liên quan. Dưới đây là một số định dạng cho dropdown trong Bootstrap.

Điều chỉnh hướng của dropdown

Mặc định, dropdown sẽ mở hướng xuống dưới. Tuy nhiên, Bootstrap cho phép bạn thay đổi hướng hiển thị dropdown bằng cách thêm các class vào phần tử cha. Dưới đây là các tùy chọn phổ biến:

Dropdown hiển thị ở giữa (centered dropdown)

Thêm .dropdown-center vào phần tử cha để menu dropdown hiển thị ngay giữa bên dưới nút:

<div class="dropdown-center">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả hiển thị:

Dropup – Hiển thị menu phía trên

Bootstrap cung cấp class .dropup kết hợp với class .btn-group để menu hiển thị phía trên nút thay vì phía dưới:

<div class="btn-group dropup">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Dropend – Hiển thị menu bên phải

Để điều chỉnh dropdown hiển thị ở bên phải, bạn có thể sử dụng class .dropend:

<div class="btn-group dropend">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Dropstart – Hiển thị menu bên trái

Để dropdown hiển thị menu phía bên trái trong thiết kế LTR (Left to Right) hoặc phía bên phải trong thiết kế RTL, chúng ta sử dụng class .dropstart:

<div class="btn-group dropstart">

   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Tùy chọn màu sắc chủ đề của dropdown

Bootstrap không có class riêng để đổi màu nền cho dropdown-menu theo chủ đề như background hay button, nhưng bạn có thể thay đổi màu nút của dropdown để thể hiện các chủ đề khác nhau.

Sử dụng các lớp btn-* của Bootstrap để đổi màu nút chính của dropdown. Ví dụ để tạo dropdown với chủ đề primary:

<div class="dropdown">

   <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Ngoài ra, bạn có thể sử dụng các theme chủ đề khác của button như:

Tham khảo thêm bài viết hướng dẫn chi tiết Cách sử dụng Button trong Bootstrap.

Điều chỉnh kích thước của dropdown

Tương tự như màu sắc, việc thay đổi kích thước của dropdown cũng đến từ việc thay đổi kích thước nút của dropdown. Bạn có thể sử dụng các lớp .btn-sm (kích thước nhỏ), và .btn-lg (dành cho kích thước lớn) của Bootstrap để đổi kích cỡ của nút chính của dropdown.

Dropdown có kích thước nhỏ (sử dụng btn-sm)

<div class="dropdown mb-2">

   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
     Dropdown nhỏ
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
   </ul>

 </div>

Kết quả:

Dropdown có kích thước lớn (sử dụng btn-lg)

<div class="dropdown mb-2">

   <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
     Dropdown lớn
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Vô hiệu hóa (disable) dropdown

Nếu bạn muốn vô hiệu hóa (disable) một mục trong dropdown, chỉ cần thêm lớp .disabled vào phần tử trong menu. Điều này sẽ làm mục đó không tương tác được và được hiển thị với màu mờ hơn.

<div class="dropdown">

   <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
     <li><a class="dropdown-item disabled" aria-disabled="true">Tùy chọn 2</a></li>
     <li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
   </ul>

 </div>

Kết quả:

Trong đó, phần tử “Tùy chọn 2” đã bị vô hiệu hóa, khiến phần tử này không thể bấm được. Thuộc tính aria-disabled=“true” giúp hỗ trợ trình đọc màn hình (accessibility).

So sánh dropdown và select trong Bootstrap

Tổng quan về select trong Bootstrap

Trong HTML, select là một phần tử chuẩn để tạo ra danh sách các tùy chọn trong một form. Ví dụ một select với kiểu dáng mặc định trong HTML sẽ hiển thị như này:

Bootstrap không cung cấp component riêng cho select, nhưng nó có các styling hỗ trợ để giúp bạn cải thiện giao diện mặc định của select, nâng cao trải nghiệm của người dùng.

Tham khảo thêm về Cách sử dụng Select HTML

Định dạng của select trong Bootstrap

Dưới đây là ví dụ cơ bản về select trong Bootstrap:

   <div class="d-flex align-items-center m-5">
     <label for="fruit" class="form-label me-3 mb-0">Chọn loại trái cây:</label>

     <select class="form-select w-auto" id="fruit" name="fruit">
       <option value="apple">Táo</option>
       <option value="banana">Chuối</option>
       <option value="orange">Cam</option>
       <option value="mango">Xoài</option>
     </select>

   </div>

Trong đoạn code trên, việc áp dụng class .form-select giúp select có kiểu dáng được cải tiến với border bo tròn, padding đẹp, hover/focus rõ ràng. Ngoài ra nó có giúp tương thích hoàn hảo với responsive layout và các form control khác của Bootstrap.

Kết quả hiển thị:

Điều chỉnh kích thước select

Trong Bootstrap, bạn có thể điều chỉnh kích thước của select một cách nhanh chóng bằng cách sử dụng các lớp tiện ích mà Bootstrap cung cấp. Điều này giúp bạn dễ dàng căn chỉnh giao diện cho phù hợp với ngữ cảnh sử dụng.

.form-select : kích thước tiêu chuẩn

.form-select-sm : kích thước nhỏ hơn (sử dụng trong các giao diện gọn nhẹ)

.form-select-lg : kích thước lớn, dùng cho các tiêu đề lớn

Mặc dù select và dropdown đều hiển thị danh sách tùy chọn, nhưng chúng phục vụ mục đích khác nhau và có cách hoạt động riêng. Bảng dưới đây giúp bạn phân biệt rõ hai thành phần này để sử dụng đúng ngữ cảnh.

Từ những so sánh trên, có thể thấy sự khác biệt cốt lõi giữa Dropdown và Select nằm ở mục đích sử dụng. Trong khi Select là lựa chọn lý tưởng cho các biểu mẫu cần thu thập và gửi dữ liệu người dùng, thì Dropdown lại phát huy hiệu quả trong việc hiển thị menu thao tác hoặc các liên kết điều hướng.

Vì vậy bạn hãy dùng Select khi bạn cần lấy dữ liệu từ người dùng, và dùng Dropdown khi bạn muốn tạo các tùy chọn hành động hoặc hiển thị menu phụ.

Những lưu ý khi sử dụng dropdown trong Bootstrap

Khi dùng dropdown trong dự án Bootstrap, bạn nên chú ý một số điểm sau để tránh lỗi giao diện hoặc hành vi không mong muốn:

• Dropdown không gửi dữ liệu form: Dropdown trong Bootstrap không phải là <select>, nên sẽ không gửi dữ liệu khi submit form. Nếu cần, bạn phải dùng JavaScript để lấy giá trị và gán vào một input ẩn.
• Không dùng hover để kích hoạt: Dropdown Bootstrap chỉ mở khi click, không hỗ trợ hover (trừ khi tự viết thêm JS). Điều này giúp đảm bảo tương thích tốt trên thiết bị di động.
• Tránh đặt dropdown trong vùng bị giới hạn chiều cao: điều này có thể dẫn đến việc menu bị che mất một phần hoặc hoàn toàn.

Bài tập luyện tập sử dụng dropdown và select trong Bootsrap

Bài tập 1 (Cơ bản)

Tạo một form chọn môn học sử dụng select theo hình minh họa sau:

<form class="w-50 p-3 border rounded">

   <h5>Thông tin cá nhân</h5>

   <div class="mb-3">
     <label for="country" class="form-label">Chọn môn học</label>
     <select class="form-select form-select-sm" id="country" name="country">
       <option value="toan">Toán</option>
       <option value="ly">Lý</option>
       <option value="hoa">Hóa</option>
       <option value="van">Văn</option>
     </select>
   </div>

 </form>

Bài tập 2 (Trung bình)

Tạo một dropdown với nút “Thao tác”. Menu gồm 3 lựa chọn: Xem, Sửa, Xóa. Khi chọn “Xóa”, hiển thị alert(“Bạn đã chọn xóa!”).

 <div class="dropdown mb-3">

   <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
     Thao tác
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Xem chi tiết</a></li>
     <li><a class="dropdown-item" href="#">Sửa</a></li>
     <li><a class="dropdown-item" href="#" onclick="alert('Bạn đã chọn xóa!')">Xóa</a></li>
   </ul>

 </div>

Bài tập 3 (Nâng cao)

Tạo navbar đơn giản có logo và menu. Thêm một dropdown trong navbar với tiêu đề “Tài khoản”. Menu gồm: Thông tin cá nhân, Đổi mật khẩu, Đăng xuất.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

   <div class="container-fluid">
     <!-- Logo -->
     <a class="navbar-brand" href="#">MySite</a>

      <!-- Toggle button cho mobile -->

     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
       <span class="navbar-toggler-icon"></span>
     </button>

      <!-- Menu chính -->

     <div class="collapse navbar-collapse" id="navbarContent">
       <ul class="navbar-nav ms-auto">
         <!-- Dropdown Tài khoản -->
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
             Tài khoản
           </a>
           <ul class="dropdown-menu dropdown-menu-end">
             <li><a class="dropdown-item" href="#">Thông tin cá nhân</a></li>
             <li><a class="dropdown-item" href="#">Đổi mật khẩu</a></li>
             <li><hr class="dropdown-divider"></li>
             <li><a class="dropdown-item" href="#">Đăng xuất</a></li>
           </ul>
         </li>
       </ul>
     </div>
   </div>

 </nav>

Câu hỏi thường gặp về dropdown và select trong Bootstrap

Có thể dùng Bootstrap để thay đổi màu nền cho Select không?

Bootstrap không hỗ trợ trực tiếp việc đổi màu nền cho Select. Nhưng bạn có thể dùng CSS tùy chỉnh kết hợp với Bootstrap để thay đổi màu nền của select. Ví dụ:

 <style>
   .form-select.custom-bg {
     background-color: #f8f9fa; /* màu xám nhạt */
   }
 </style>

 <select class="form-select custom-bg">
   <option>Chọn mục</option>
   ...
 </select>

Đọc thêm: Bootstrap Color: Cách sử dụng hệ thống màu trong Bootstrap

Dropdown có thay thế được Select không?

Mặc dù dropdown và select đều hiển thị danh sách lựa chọn, nhưng <select> dùng để nhập liệu trong form và gửi giá trị về server, còn Dropdown là menu hành động, không tự động gửi dữ liệu.

Nếu bạn cần dropdown có chức năng giống select, hãy dùng các thư viện JavaScript như Select2, Choices.js, hoặc Bootstrap Select,  chúng kết hợp giữa giao diện đẹp và tính năng nhập liệu.

Dropdown có thể sử dụng với form không?

Dropdown không phải là form input, nhưng nếu bạn muốn dùng dropdown để chọn và gửi dữ liệu trong form, bạn vẫn có thể sử dụng được. Tuy nhiên cần phải:

• Gán giá trị dropdown được chọn vào 1 <input type="hidden">
• Dùng JavaScript để cập nhật giá trị khi người dùng chọn mục

Ví dụ:

<input type="hidden" name="action" id="actionInput">

 <div class="dropdown">

   <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
     Chọn hành động
   </button>

   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#" onclick="selectAction('view')">Xem</a></li>
     <li><a class="dropdown-item" href="#" onclick="selectAction('edit')">Sửa</a></li>
   </ul>

 </div>

  <script>
   function selectAction(value) {
     document.getElementById('actionInput').value = value;
   }
 </script>

Tổng kết

Select và Dropdown là hai thành phần thường gặp khi xây dựng giao diện, nhưng phục vụ mục đích khác nhau: select dùng trong form để thu thập dữ liệu, còn dropdown phù hợp cho menu thao tác hoặc điều hướng. Hy vọng qua bài viết này, bạn đã hiểu rõ cách sử dụng và phân biệt select và dropdown, từ đó áp dụng hiệu quả vào các dự án front-end Bootstrap.