Membuat Dropdown Menggunakan Bootstrap 4

25/09/2017    Maykhel David    3658    Website

Hallo semuanya, pada kesempatan kali ini kita akan membahas tentang cara membuat dropdown pada bootstrap 4. Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar. Bootstrap ini juga sangat mempermudah dalam membangun sebuah website dengan cepat. Fungsi dropdown sendiri adalah untuk memberikan pilihan sub menu dalam sebuah website.

Ketentuan atau penulisan struktur HTML dropdown menu pada bootstrap 4 mengalami sedikit perbedaan, dan dibuat lebih sederhana. Jika kita ingin membuat dropdown standard menggunakan button biasa bisa mengikuti strutur dibawah ini.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Namun ada juga variasi dropdown yang menggunakan button group. Apa itu button group? Untuk lebih lengkapnya bisa kunjungi artikel saya yang berjudul Button dan Button Group pada Bootstrap 4. Disini kita akan menerapkan dropdown menu dengan variasi button group pada bootstrap 4.

Kita hanya perlu menambahkan sebuah class btn-group sebagai parent dari button dan dropdown yang ada. Misalnya strukturnya seperti ini

<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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Selain itu kita juga bsa membuat menu yang muncul menjadi kea rah atas dengan memberikan class dropup sebagai pengganti dropdown. Contohnya seperti ini.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">Dropup</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Baiklah teman-teman ada banyak sekali hal yang bisa kalian pelajari dari bootstrap 4 ini. Demikian artikel yang membahas tentang cara membuat dropdown dengan bootstrap 4. Semoga bermanfaat.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow