Bootstrap Dropdown
Trong hướng dẫn này, bạn sẽ học cách thêm menu thả xuống (dropdown menu) vào các thành phần Bootstrap khác nhau.
Tạo menu thả xuống với Bootstrap
Menu thả xuống thường được sử dụng bên trong thanh điều hướng ở đầu trang để hiển thị danh sách các liên kết có liên quan khi người dùng di chuột hoặc nhấp vào phần tử trình kích hoạt.
Bạn có thể sử dụng plugin Bootstrap dropdown để thêm menu thả xuống có thể chuyển đổi (tức là mở và đóng khi nhấp) vào hầu hết mọi thứ như liên kết, nút hoặc nhóm nút, thanh điều hướng, tab và nav, v.v. mà không cần viết một dòng mã JavaScript.
Thêm menu thả xuống thông qua các thuộc tính data
Bootstrap cung cấp một cơ chế dễ dàng và thanh lịch để thêm menu thả xuống vào một phần tử thông qua các thuộc tính data. Ví dụ sau đây sẽ cho bạn thấy mã tối thiểu cần thiết để thêm menu thả xuống vào siêu kết nối thông qua các thuộc tính data.
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Ví dụ trên minh họa dạng cơ bản nhất của menu thả xuống Bootstrap. Hãy cùng tìm hiểu từng phần của thành phần Bootstrap dropdown.
Giải thích mã
Menu thả xuống Bootstrap về cơ bản có hai thành phần – phần tử kích hoạt có thể là một siêu liên kết hoặc nút và menu thả xuống.
- Lớp
.dropdown
chỉ định một menu thả xuống. - Lớp
.dropdown-toggle
định nghĩa phần tử kích hoạt, là một siêu liên kết trong trường hợp của chúng tôi, trong khi thuộc tínhdata-bs-toggle="dropdown"
được yêu cầu trên phần tử kích hoạt để chuyển đổi menu thả xuống. - Phần tử
<div>
với lớp.dropdown-menu
sẽ xây dựng menu thả xuống thường chứa các liên kết hoặc hành động có liên quan.
Tương tự, bạn có thể thêm menu thả xuống cho các nút và thành phần điều hướng. Phần sau đây sẽ chỉ cho bạn một số cách triển khai phổ biến của menu thả xuống Bootstrap.
Tạo menu thả xuống trong Navbar
Các ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống vào thanh điều hướng navbar.
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Drafts</a>
<a href="#" class="dropdown-item">Sent Items</a>
<div class="dropdown-divider"></div>
<a href="#"class="dropdown-item">Trash</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Reports</a>
<a href="#" class="dropdown-item">Settings</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Kết quả của ví dụ trên sẽ giống như sau:
Mẹo: Bạn có thể vẽ một đường phân chia để tách các liên kết bên trong menu thả xuống bằng cách thêm lớp
.dropdown-divider
vào một phần tử trống<div>
.
Tạo menu thả xuống trong Nav
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống vào nav.
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Drafts</a>
<a href="#" class="dropdown-item">Sent Items</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Trash</a>
</div>
</li>
<li class="nav-item dropdown ms-auto">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Reports</a>
<a href="#" class="dropdown-item">Settings</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Logout</a>
</div>
</li>
</ul>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể chuyển đổi ví dụ trên thành một tab thả xuống bằng cách chỉ cần thay thế lớp .nav-pills
bằng .nav-tabs
, mà không có bất kỳ thay đổi nào về mã.
Tạo menu thả xuống trong button
Các ví dụ sau đây sẽ cho bạn thấy cách thêm menu thả xuống vào một button.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
Tương tự, bạn có thể thêm menu thả xuống cho các biến thể khác của button, như được hiển thị ở đây:
Tạo menu thả xuống để tách các button
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống để tách các button.
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
Tương tự, bạn có thể thêm menu thả xuống cho các biến thể khác của button, như được hiển thị ở đây:
Mẹo: Bạn có thể sử dụng các lớp định kích thước tương đối của Bootstrap như
.btn-lg
và.btn-sm
trên phần tử.btn
để thay đổi kích thước các button thả xuống.
Tạo menu thả xuống bên trong button group
Để tạo menu thả xuống bên trong một button group, chỉ cần đặt lớp .btn-group
cùng với mã của menu thả xuống trong một .btn-group
khác, như được hiển thị trong ví dụ sau:
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Another Button</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể đặt menu thả xuống bên trong button group xếp chồng lên nhau theo chiều dọc, như thế này:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Another Button</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
Thay đổi vị trí của menu thả xuống
Bạn thậm chí có thể kích hoạt menu thả xuống ở trên, cũng như ở bên trái và bên phải của các phần tử bằng cách thêm một lớp bổ sung .dropup
, .dropstart
và .dropend
tương ứng với phần tử cha (tức là phần tử .btn-group
), như được hiển thị trong ví dụ sau.
<!-- Dropup menu -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<!-- Dropleft menu -->
<div class="btn-group dropstart">
Kết quả của ví dụ trên sẽ giống như sau:
Tạo menu thả xuống được căn bên phải
Theo mặc định, góc trên cùng bên trái của menu thả xuống được đặt ở góc dưới cùng bên trái của phần tử cha của nó, tức là 100% từ trên cùng và dọc theo bên trái. Để căn phải menu thả xuống, chỉ cần thêm một lớp bổ sung .dropdown-menu-end
vào lớp .dropdown-menu
cơ sở.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Right-aligned Dropdown Menu</button>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Thêm tiêu đề vào các mục của menu thả xuống
Bạn có thể tùy chọn thêm tiêu đề menu để gắn nhãn một phần cho các mục của menu bên trong menu thả xuống bằng cách thêm lớp .dropdown-header
vào phần tử <div>
, như sau:
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Products</button>
<div class="dropdown-menu">
<div class="dropdown-header">ELECTRONICS</div>
<a href="#" class="dropdown-item">Mobiles</a>
<a href="#" class="dropdown-item">Tablets</a>
<a href="#" class="dropdown-item">Laptops</a>
<div class="dropdown-header">FASHION</div>
<a href="#" class="dropdown-item">Clothing</a>
<a href="#" class="dropdown-item">Sunglasses</a>
</div>
</div>
Kết quả của ví dụ trên như sau:
Tắt các mục trong menu thả xuống
Bạn có thể áp dụng lớp .disabled
cho các mục của menu thả xuống để làm cho chúng trông giống như bị vô hiệu hóa. Tuy nhiên, liên kết vẫn có thể nhấp được, để vô hiệu hóa điều này, bạn thường có thể xóa thuộc tính href
của liên kết bằng cách sử dụng JavaScript hoặc thủ công.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Reports</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">View</a>
<a href="#" class="dropdown-item">Download</a>
<a href="#" class="dropdown-item disabled" tabindex="-1">Edit / Delete</a>
</div>
</div>
Kết quả của ví dụ trên như sau:
Tạo menu thả xuống bằng JavaScript
Bạn cũng có thể tạo menu thả xuống theo cách thủ công bằng cách sử dụng JavaScript – chỉ cần gọi phương thức dropdown()
với bộ chọn id
hoặc class
của phần tử liên kết hoặc button trong mã JavaScript của bạn.
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
Lưu ý:
data-bs-toggle="dropdown"
vẫn bắt buộc đối với phần tử kích hoạt của menu thả xuống bất kể bạn gọi menu thả xuống qua JavaScript hay thuộc tính data.
Các tùy chọn của menu thả xuống
Có một số tùy chọn nhất định có thể được truyền cho phương thức dropdown()
để tùy chỉnh chức năng của menu thả xuống. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.
Để thiết lập các tùy chọn cho menu thả xuống thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-
, chẳng hạn như data-bs-display="static"
, v.v. Ngoài ra, khi truyền các tùy chọn thông qua các thuộc tính data, hãy đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case . Ví dụ, thay vì sử dụng data-bs-autoClose="false"
, hãy sử dụng data-bs-auto-close="false"
.
Tên | Kiểu | Giá trị mặc định | Mô tả |
---|---|---|---|
boundary | string | element | ‘clippingParents’ | Ranh giới ràng buộc tràn của menu thả xuống (chỉ áp dụng cho preventOverflow của Popper). Nó cũng có thể chấp nhận một tham chiếu HTMLElement (chỉ qua JavaScript). |
reference | string | element | object | ‘toggle’ | Phân tử tham chiếu của menu thả xuống. Chấp nhận các giá trị 'toggle' , 'parent' , một tham chiếu HTMLElement hoặc một đối tượng cung cấp getBoundingClientRect . |
display | string | ‘dynamic’ | Theo mặc định, Bootstrap sử dụng Popper để định vị động. Bạn có thể vô hiệu hóa điều này với 'static' . |
offset | array | string | function | [0, 2] | Chỉ định độ lệch vị trí của menu thả xuống so với ví trí ban đầu của nó. Bạn có thể truyền một chuỗi trong thuộc tính data với các giá trị được phân tách bằng dấu phẩy như:data-bs-offset="10,20" . |
autoClose | boolean | string | true |
Cấu hình hành vi tự động đóng của menu thả xuống:
|
popperConfig | null | object | function | null | Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem cấu hình của Popper. |
Xem tài liệu của Popper.js để biết thêm thông tin về các tùy chọn được đề cập ở trên.
Các phương thức của menu thả xuống
Đây là phương thức của menu thả xuống tiêu chuẩn của bootstrap:
toggle
Phương thức này chuyển đổi menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myDropdown").dropdown("toggle");
});
});
</script>
show
Phương thức này hiển thị menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myDropdown").dropdown("show");
});
});
</script>
hide
Phương thức này ẩn menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myDropdown").dropdown("hide");
});
});
</script>
update
Phương thức này cập nhật vị trí của menu thả xuống của một phần tử.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myDropdown").dropdown("update");
});
});
</script>
dispose
Phương thức này hủy menu thả xuống của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myDropdown").dropdown("dispose");
});
});
</script>
getInstance
Đây là một phương thức tĩnh cho phép bạn lấy instance của menu thả xuống được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myDropdown = bootstrap.Dropdown.getInstance($("#myDropdown")[0]);
console.log(myDropdown);
// {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: {…}, _config: {…}, _menu: div.dropdown-menu, _inNavbar: false}
});
});
</script>
getOrCreateInstance
Đây là một phương thức tĩnh cho phép bạn lấy instance của menu thả xuống được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp menu thả xuống không được khởi chạy.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myDropdown = bootstrap.Dropdown.getOrCreateInstance($("#myDropdown")[0]);
console.log(myDropdown);
// {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: null, _config: {…}, _menu: div.dropdown-menu, _inNavbar: false}
});
});
</script>
Các sự kiện của menu thả xuống
Đây là các sự kiện Bootstrap tiêu chuẩn để xử lý chức năng của menu thả xuống.
Tất cả các sự kiện của menu thả xuống được kích hoạt tại phần tử kích hoạt và sau đó hiện lên. Vì vậy, bạn cũng có thể thêm trình lắng nghe sự kiện trên phần tử cha của .dropdown-menu
. Ngoài ra, bạn có thể sử dụng event.relatedTarget
để nhắm mục tiêu phần tử liên kết chuyển đổi.
Sự kiện | Mô tả |
---|---|
show.bs.dropdown | Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi. |
shown.bs.dropdown | Sự kiện này được kích hoạt khi menu thả xuống hiển thị cho người dùng và quá trình chuyển đổi CSS đã hoàn tất. |
hide.bs.dropdown | Sự kiện này được kích hoạt ngay lập tức khi phương thức hide được gọi. |
hidden.bs.dropdown | Sự kiện này được kích hoạt khi menu thả xuống bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất. |
Ví dụ sau đây hiển thị nội dung văn bản của liên kết thả xuống khi người dùng nhấp vào nó.
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(e){
var linkText = $(e.relatedTarget).text(); // Get the link text
alert("Click on OK button to view the dropdown menu for - " + linkText);
});
});
</script>