Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Trình đơn thả xuống

Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa với plugin thả xuống Bootstrap.

Trên trang này

Tổng quan

Danh sách thả xuống có thể chuyển đổi, các lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa. Chúng được tạo tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được chuyển đổi bằng cách nhấp chuột, không phải bằng cách di chuột; đây là một quyết định thiết kế có chủ đích .

Trình đơn thả xuống được xây dựng trên thư viện của bên thứ ba, Popper , cung cấp khả năng định vị động và phát hiện chế độ xem. Đảm bảo bao gồm popper.min.js trước JavaScript của Bootstrap hoặc sử dụng bootstrap.bundle.min.js/ bootstrap.bundle.jscó chứa Popper. Popper không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng vì không cần định vị động.

Khả năng tiếp cận

Tiêu chuẩn WAI ARIA xác định một role="menu"widget thực tế , nhưng điều này dành riêng cho các menu giống như ứng dụng để kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và menu phụ.

Mặt khác, các trình đơn thả xuống của Bootstrap được thiết kế để chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu khác nhau. Ví dụ: có thể tạo danh sách thả xuống chứa các đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng như không tự động thêm) bất kỳ thuộc tính rolevà aria-thuộc tính nào cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải tự bao gồm các thuộc tính cụ thể hơn này.

Tuy nhiên, Bootstrap bổ sung hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các .dropdown-itemphần tử riêng lẻ bằng cách sử dụng các phím con trỏ và đóng menu bằng ESCphím.

Các ví dụ

Bao bọc nút chuyển đổi của menu thả xuống (nút hoặc liên kết của bạn) và menu thả xuống bên trong .dropdownhoặc một phần tử khác khai báo position: relative;. Trình đơn thả xuống có thể được kích hoạt từ <a>hoặc <button>các yếu tố để phù hợp hơn với nhu cầu tiềm năng của bạn. Các ví dụ được hiển thị ở đây sử dụng <ul>các yếu tố ngữ nghĩa nếu thích hợp, nhưng đánh dấu tùy chỉnh được hỗ trợ.

Một nút

Bất kỳ đĩa đơn .btnnào cũng có thể được chuyển thành một trình đơn thả xuống với một số thay đổi về đánh dấu. Đây là cách bạn có thể đặt chúng hoạt động với một trong hai <button>phần tử:

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

Và với <a>các yếu tố:

html 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Nút tách

Tương tự, tạo danh sách thả xuống nút tách với hầu như đánh dấu giống như danh sách thả xuống nút đơn, nhưng có bổ sung thêm .dropdown-toggle-splitkhoảng cách thích hợp xung quanh dấu mũ thả xuống.

Chúng tôi sử dụng lớp bổ sung này để giảm padding25% chiều ngang ở hai bên của dấu mũ và loại bỏ lớp margin-leftđược thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu mũ ở giữa trong nút tách và cung cấp một vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Định cỡ

Nút thả xuống hoạt động với các nút ở mọi kích thước, bao gồm cả nút thả xuống mặc định và nút chia nhỏ.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Trình đơn thả xuống tối

Chọn tham gia trình đơn thả xuống tối hơn để phù hợp với thanh điều hướng tối hoặc kiểu tùy chỉnh bằng cách thêm .dropdown-menu-darkvào hiện có .dropdown-menu. Không cần thay đổi đối với các mục thả xuống.

html 
<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 dropdown-menu-dark">
    <li><a class="dropdown-item active" 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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Và đưa nó vào sử dụng trong thanh điều hướng:

html 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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>
        </li>
      </ul>
    </div>
  </div>
</nav>

Hướng

RTL

Chỉ đường được phản chiếu khi sử dụng Bootstrap trong RTL, nghĩa là .dropstartsẽ xuất hiện ở phía bên phải.

Căn giữa

Đặt menu thả xuống căn giữa bên dưới nút chuyển đổi với .dropdown-centerphần tử mẹ.

html 
<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm .dropupvào phần tử mẹ.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Tập trung vào giữa

Đặt menu thả xuống ở giữa phía trên nút chuyển đổi với .dropup-centerphần tử mẹ.

html 
<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Giảm chi tiêu

Kích hoạt menu thả xuống ở bên phải của các phần tử bằng cách thêm .dropendvào phần tử mẹ.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Kích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm .dropstartvào phần tử mẹ.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Bạn có thể sử dụng <a>hoặc <button>các phần tử làm mục thả xuống.

html 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Bạn cũng có thể tạo các mục thả xuống không tương tác với .dropdown-item-text. Thoải mái tạo kiểu thêm với các tiện ích văn bản hoặc CSS tùy chỉnh.

html 
<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <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>

Tích cực

Thêm .activevào các mục trong menu thả xuống để tạo kiểu cho chúng là hoạt động . Để chuyển trạng thái hoạt động cho các công nghệ hỗ trợ, hãy sử dụng aria-currentthuộc tính - sử dụng pagegiá trị cho trang hiện tại hoặc truecho mục hiện tại trong một tập hợp.

html 
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Vô hiệu hóa

Thêm .disabledvào các mục trong menu thả xuống để tạo kiểu cho chúng là bị vô hiệu hóa .

html 
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Theo mặc định, menu thả xuống tự động được định vị 100% từ trên cùng và dọc theo bên trái của trình đơn gốc. Bạn có thể thay đổi điều này với các .drop*lớp định hướng, nhưng bạn cũng có thể kiểm soát chúng bằng các lớp bổ trợ bổ sung.

Thêm .dropdown-menu-endvào a .dropdown-menuđể căn phải menu thả xuống. Chỉ đường được phản chiếu khi sử dụng Bootstrap trong RTL, nghĩa là .dropdown-menu-endsẽ xuất hiện ở phía bên trái.

Đứng lên! Các trình đơn thả xuống được định vị nhờ Popper ngoại trừ khi chúng được chứa trong một thanh điều hướng.
html 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Căn chỉnh đáp ứng

Nếu bạn muốn sử dụng căn chỉnh đáp ứng, hãy tắt định vị động bằng cách thêm data-bs-display="static"thuộc tính và sử dụng các lớp biến thể đáp ứng.

Để căn phải menu thả xuống với điểm ngắt đã cho hoặc lớn hơn, hãy thêm .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Để căn chỉnh bên trái menu thả xuống với điểm ngắt đã cho hoặc lớn hơn, hãy thêm .dropdown-menu-endvà .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Lưu ý rằng bạn không cần thêm data-bs-display="static"thuộc tính vào các nút thả xuống trong thanh điều hướng, vì Popper không được sử dụng trong thanh điều hướng.

Tùy chọn căn chỉnh

Sử dụng hầu hết các tùy chọn được hiển thị ở trên, đây là bản demo bồn rửa nhà bếp nhỏ về các tùy chọn căn chỉnh thả xuống khác nhau ở một nơi.

html 
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Nội dung menu

Tiêu đề

Thêm tiêu đề vào nhãn các phần hành động trong bất kỳ menu thả xuống nào.

html 
<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Ngăn cách

Tách các nhóm các mục menu có liên quan bằng một dải phân cách.

html 
<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>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Chữ

Đặt bất kỳ văn bản dạng tự do nào trong menu thả xuống với văn bản và sử dụng các tiện ích giãn cách . Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng menu.

Một số văn bản mẫu tự do chảy trong menu thả xuống.

Và đây là văn bản ví dụ hơn.

html 
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Các hình thức

Đặt biểu mẫu trong menu thả xuống hoặc đưa biểu mẫu vào menu thả xuống và sử dụng các tiện ích lề hoặc đệm để tạo cho nó không gian âm mà bạn yêu cầu.

Mới xung quanh đây? Đăng ký Quên mật khẩu?
html 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
html 
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Sử dụng data-bs-offsethoặc data-bs-referenceđể thay đổi vị trí của menu thả xuống.

html 
<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </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>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Hành vi tự động đóng

Theo mặc định, menu thả xuống được đóng khi nhấp vào bên trong hoặc bên ngoài menu thả xuống. Bạn có thể sử dụng autoClosetùy chọn để thay đổi hành vi này của menu thả xuống.

html 
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, menu thả xuống hiện sử dụng các biến CSS cục bộ trên .dropdown-menuđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Tùy chỉnh thông qua các biến CSS có thể được nhìn thấy trên .dropdown-menu-darklớp nơi chúng tôi ghi đè các giá trị cụ thể mà không thêm các bộ chọn CSS trùng lặp.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Biến Sass

Các biến cho tất cả danh sách thả xuống:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Các biến cho menu thả xuống tối :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Các biến cho dấu mũ dựa trên CSS cho biết khả năng tương tác của trình đơn thả xuống:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixin

Mixin được sử dụng để tạo dấu mũ dựa trên CSS và có thể được tìm thấy trong scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Cách sử dụng

Thông qua các thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi .showlớp trên cha mẹ .dropdown-menu. Thuộc data-bs-toggle="dropdown"tính được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng nó.

Trên các thiết bị hỗ trợ cảm ứng, việc mở menu thả xuống sẽ thêm các mouseovertrình xử lý trống vào các phần tử con ngay lập tức <body>. Việc hack được thừa nhận là xấu xí này là cần thiết để giải quyết một vấn đề trong ủy quyền sự kiện của iOS , điều này sẽ ngăn không cho một lần nhấn ở bất kỳ đâu bên ngoài trình đơn thả xuống kích hoạt mã đóng trình đơn thả xuống. Sau khi trình đơn thả xuống bị đóng, những mouseovertrình xử lý trống bổ sung này sẽ bị xóa.

Qua các thuộc tính dữ liệu

Thêm data-bs-toggle="dropdown"vào liên kết hoặc nút để chuyển đổi menu thả xuống.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Qua JavaScript

Gọi các trình đơn thả xuống qua JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"vẫn được yêu cầu

Bất kể bạn gọi menu thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, data-bs-toggle="dropdown"luôn bắt buộc phải có trên phần tử trình kích hoạt của menu thả xuống.

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

Tên Loại hình Mặc định Sự mô tả
autoClose boolean, chuỗi true Định cấu hình hành vi tự động đóng của menu thả xuống:
  • true- trình đơn thả xuống sẽ được đóng lại bằng cách nhấp vào bên ngoài hoặc bên trong trình đơn thả xuống.
  • false- menu thả xuống sẽ được đóng lại bằng cách nhấp vào nút bật tắt và gọi hidehoặc togglephương thức theo cách thủ công. (Cũng sẽ không đóng bằng cách nhấn escphím)
  • 'inside'- menu thả xuống sẽ bị đóng (chỉ) bằng cách nhấp vào bên trong menu thả xuống.
  • 'outside'- menu thả xuống sẽ bị đóng (chỉ) bằng cách nhấp vào bên ngoài menu thả xuống.
Lưu ý: menu thả xuống luôn có thể được đóng bằng ESCchìa khóa.
boundary chuỗi, phần tử 'clippingParents' Ranh giới ràng buộc tràn của menu thả xuống (chỉ áp dụng cho công cụ sửa đổi ngăn chặn dòng chảy của Popper). Theo mặc định, nó clippingParentsvà có thể chấp nhận một tham chiếu HTMLElement (chỉ qua JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu DetOverflow của Popper .
display sợi dây 'dynamic' Theo mặc định, chúng tôi sử dụng Popper để định vị động. Vô hiệu hóa điều này với static.
offset mảng, chuỗi, hàm [0, 2] Phần bù của menu thả xuống so với mục tiêu của nó. data-bs-offset="10,20"Bạn có thể chuyển một chuỗi vào thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như:. Khi một hàm được sử dụng để xác định độ lệch, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper đóng vai trò là đối số đầu tiên của nó. Nút DOM của phần tử kích hoạt được chuyển làm đối số thứ hai. Hàm phải trả về một mảng có hai số: độ trượt , khoảng cách . Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper .
popperConfig null, đối tượng, chức năng null Để thay đổi cấu hình Popper mặc định của Bootstrap, hãy xem cấu hình của Popper . Khi một hàm được sử dụng để tạo cấu hình Popper, nó được gọi với một đối tượng có chứa cấu hình Popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho Popper.
reference chuỗi, phần tử, đối tượng 'toggle' Phần tử tham chiếu của menu thả xuống. Chấp nhận các giá trị của 'toggle', 'parent'một tham chiếu HTMLElement hoặc một đối tượng cung cấp getBoundingClientRect. Để biết thêm thông tin, hãy tham khảo tài liệu về hàm tạo của Popper và tài liệu về phần tử ảo .

Sử dụng chức năng vớipopperConfig 

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Phương pháp

Phương pháp Sự mô tả
dispose Hủy bỏ danh sách thả xuống của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
getInstance Phương thức tĩnh cho phép bạn lấy thể hiện thả xuống được liên kết với một phần tử DOM, bạn có thể sử dụng nó như sau bootstrap.Dropdown.getInstance(element):.
getOrCreateInstance Phương thức static trả về một phiên bản thả xuống được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. bootstrap.Dropdown.getOrCreateInstance(element)Bạn có thể sử dụng nó như thế này :.
hide Ẩn menu thả xuống của thanh điều hướng hoặc tab điều hướng nhất định.
show Hiển thị menu thả xuống của thanh điều hướng hoặc tab điều hướng nhất định.
toggle Chuyển đổi menu thả xuống của một thanh điều hướng hoặc tab điều hướng nhất định.
update Cập nhật vị trí của một phần tử thả xuống.

Sự kiện

Tất cả các sự kiện thả xuống được kích hoạt tại phần tử bật tắt và sau đó nổi lên. Vì vậy, bạn cũng có thể thêm trình nghe sự kiện trên .dropdown-menuphần tử mẹ của. hide.bs.dropdownvà hidden.bs.dropdowncác sự kiện có clickEventthuộc tính (chỉ khi loại Sự kiện ban đầu là click) có chứa Đối tượng sự kiện cho sự kiện nhấp chuột.

Loại sự kiện Sự mô tả
hide.bs.dropdown Kích hoạt ngay lập tức khi hidephương thức thể hiện đã được gọi.
hidden.bs.dropdown Kích hoạt khi danh sách thả xuống hoàn tất bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất.
show.bs.dropdown Kích hoạt ngay lập tức khi showphương thức thể hiện được gọi.
shown.bs.dropdown 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. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})