Dropdown cơ bản

Để tạo ra một DropDown menu trình bày HTML theo cấu trúc sau:

Ví dụ

<div class="dropdown ">
    <div class="dropdown-toggle text-danger"  data-toggle="dropdown">
        <strong>Dropdown Menu</strong>
    </div>
    <div class="dropdown-menu" >
        <a class="dropdown-item" href="#">Menu 1</a>
        <a class="dropdown-item" href="#">Menu item 2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Menu 3 ...</a>
    </div>
</div>

Tạo Split button

Thay vì sử dụng phần tử .dropdown có thể chuyển sang sử dụng phần tử .btn-group (Xem phần Nút bấm) để tạo ra loại Nút bấm chia làm 2 phần, phần mũi tên bấm vào đổ xuống một Menu .dropdown-menu. Ngoài ra phần nút bấm để đổ menu cho thêm lớp .dropdown-toggle-split

<div class="btn-group">

    <a class="btn btn-danger" href="#">Split Button</a>
    
    <div class="btn btn-success dropdown-toggle dropdown-toggle-split"  data-toggle="dropdown"></div>

    <div class="dropdown-menu" >
        <a class="dropdown-item" href="#">Menu 1</a>
        <a class="dropdown-item" href="#">Menu item 2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Menu 3 ...</a>
    </div>
</div>

Để tạo ra mũi tên hướng lên, và Menu xuất hiện phía trên Nút bấm thì ở phần tử gốc cho thêm .dropup. Ngoài ra còn có .dropleft, .dropright

<div class="btn-group dropup">
   <!--Thành phần khác như trên-->
</div>