Membuat Menu Dropdown di Bootstrap

Setelah 9 bulan vakum dari blog, saya ingin melanjutkan lagi pembahasan mengenai bootstrap yang sempat tertunda. Sebelumnya saya minta maaf karena terlalu lama vakumnya. Oke kita lanjut...

Dropdowns

Untuk membuat menu dropdown, kita perlu membungkus pemicunya (trigger) dan menu dropdown dengan .dropdown
Contoh penerapannya:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>

Hasilnya:

Sub Menu 1 Sub Menu 2 Sub Menu 3

Kita juga bisa mengubah arahnya menjadi memanjang keatas (biasanya kebawah) dengan mengganti pembungkusnya dengan .dropup
Contoh penerapannya:

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>

Hasilnya:

Sub Menu 1 Sub Menu 2 Sub Menu 3

Alignment

Secara default, posisi menu dropdown berada di 100% dari atas dan sisi kiri dari induknya. Untuk membuatnya berada disisi kanan, gunakan .dropdown-menu-right pada .dropdown-menu
Formatnya seperti ini:

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Headers

Untuk menambahkan header pada label menu dropdown, kita gunakan class .dropdown-header pada <li>
Contoh penerapannya:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Header 1</li>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li class="dropdown-header">Header 2</li>
    <li><a href="#">Sub Menu 4</a></li>
  </ul>
</div>

Hasilnya:

Header 1 Sub Menu 1 Sub Menu 2 Sub Menu 3 Header 2 Sub Menu 4

Divider

Tambahkan divider untuk memberi pembatas link pada menu dropdown
Contoh penerapannya:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Sub Menu 4</a></li>
  </ul>
</div>

Hasilnya seperti ini:

Sub Menu 1 Sub Menu 2 Sub Menu 3 Sub Menu 4

Disabled menu items

Tambahkan .disabled pada <li> untuk menonaktifkan link di menu dropdown
Contoh penerapannya:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li class="disabled"><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>

Hasilnya:

Sub Menu 1 Sub Menu 2 Sub Menu 3

Sementara itu dulu yang kita pelajari. Selanjutnya kita akan mempelajari Button Groups. Silahkan baca disini. Selamat belajar.

INGAT!!!
jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini