Bootstrap 3 Dropdown - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Dropdown

TrikSonic - Apa itu Dropdown pada Bootstrap ? Dropdown adalah Bentuk menu yang menurun ke bawah pada tampilan Graphical User Interface biasaya berupa list box, yang diperuntukan untuk user dalam memilih opsi yang tersedia

Catatan : jQuery dan bootstrap Plugin diperlukan untuk Dropdown Bootstrap

Contoh Dropdown

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Dropup

Jika ingin tampilan menu yang keluar berada diatas element Pemicu gunakan class .dropup pada pembungkus utama.

Contoh :

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Dropdown Posisi

Untuk mengatur keselarasan atau posisi menu dropdown, gunakan class .dropdown-menu-left (untuk posisi kiri) dan .dropdown-menu-right (untuk posisi kanan).

Jika metode ini diterapkan maka dropdown akan menyesuaikan posisi dengan lebar pembungkus nya.

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Dropdown Headers

Digunakan untuk judul atau label pada daftar menu. Untuk menerapkannya tambahkan class .dropdown-header pada element <li> yang berada didalam element <ul class="dropdown-menu">...</ul>

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Tutorial</li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="dropdown-header">Judul 2</li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Dropdown Divider

Divider pada dropdown Bootstrap berfungsi sebagai pembatas antar daftar menu.

Untuk menerapkannya tambahkan class .divider pada element <li>

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Link Terpisah</a></li>
  </ul>
</div>

Dropdown Active dan Disabled

Untuk menampilkan daftar menu yang sedang aktif gunakan class .active pada element <li> yang berada dalam area <ul class="dropdown-menu">..</ul>

Sedangkan untuk memberikan tampilan nonaktif pada daftar menu gunakan class .disabled

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="active"><a href="#">Active List</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Disabled List</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>