Cara Membuat Dropdown dengan Bootstrap 4

Dropdown atau Dropdown Menu adalah Menu Toggle (On/Off) yang dapat menentukan pengguna dalam memilih suatu pilihan dari daftar yang telah di tentukan. Berikut adalah contohnya:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Tombol Dropdown
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
    </div>
</div>

Penjelasan Dropdown
Class .dropdown pada kode diatas merupakan penanda bahwasanya elemen tersebut adalah Dropdown Menu.

Untuk membuka Dropdown Menu, kita dapat menggunakan tombol atau link dengan class .dropdown-toggle dan atribut data-toggle="dropdown".

Selanjutnya, kita harus menambahkan class .dropdown-menu kedalam elemen <div> agar Dropdown Menu dapat berfungsi. Kemudian menambahkan class .dropdown-item kedalam setiap elemen (Link atau tombol) Dropdown Menu.

Membuat Pembatas Dropdown

Class .dropdown-divider berufungsi untuk memisahkan Link yang ada di dalam Dropdown Menu dengan garis (Border) Horizontal. Contoh:

<div class="dropdown-divider"></div> 

Membuat Dropdown Header

Class .dropdown-header berfungsi untuk menambahkan Header kedalam Dropdown Menu. Contoh:

<div class="dropdown-header">Dropdown Header</div>

Membuat Dropdown Aktif dan Disable

Dropdown Aktif berfungsi untuk menandai item tertentu pada Dropdown (Menambahkan Background berwarna biru). Untuk membuatnya, kita dapat menggunakan class .active.

Dropdown Disabled berfungsi untuk menonaktifkan item tertentu pada Dropdown (Menambahkan warna abu-abu kedalam teks dan tidak dapat di klik). Untuk membuatnya, kita dapat menggunakan class .disabled.

<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a> 

Mengatur Posisi Dropdown

Kita juga dapat mengatur posisi Dropdown menjadi di sisi kanan dengan menggunakan class .dropright atau mengatur posisi Dropdown menjadi di sisi kiri dengan menggunakan class .dropleft. Perlu di ingat bahwa kedua class tersebut akan menambahkan icon arah panah kanan/kiri secara otomatis. Contoh:

<div class="dropdown dropright">
<div class="dropdown dropleft">

Mengatur Dropdown Menjadi di Posisi Kanan

Untuk mengatur Dropdwon agar perataaan atau posisinya menjadi di sisi kanan, kita dapat menggunakan class .dropdown-menu-right kedalam elemen yang memiliki class .dropdown-menu. Contoh:

<div class="dropdown-menu dropdown-menu-right">

Mengatur Dropdown Menjadi di Posisi Atas (Dropup)

Jika kalian ingin Dropdown Menu menjadi di posisi atas, kita dapat mengubah elemen <div> yang memiliki class .dropdown menjadi class .dropup. Contoh:

<div class="dropup">

Teks Dropdown

Class .dropdown-item-text biasanya digunakan untuk menambahkan teks biasa kedalam item atau pada link dengan Styling Default. Contoh:

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Tombol Dropdown
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item-text" href="#">Teks Link</a>
        <span class="dropdown-item-text">Teks Biasa</span>
    </div>
</div>

Membuat Tombol Group dengan Dropdown

Berikut adalah contoh beserta cara membuatnya:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">Smartphone</a>
        </div>
    </div>
</div>

Membuat Tombol Dropdown Terpisah

Berikut adalah contoh beserta cara membuatnya:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>

Membuat Tombol Group dengan Dropdown Vertikal

Berikut adalah contoh beserta cara membuatnya:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">Smartphone</a>
        </div>
    </div>
</div>