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:

Dropdown Menu

<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>

Lihat kode di Github | Lihat Live Demo

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:

 Membuat Pembatas Dropdown

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

Lihat kode di Github | Lihat Live Demo

Membuat Dropdown Header

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

Membuat Dropdown Header

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

Lihat kode di Github | Lihat Live Demo

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.

Membuat Dropdown Aktif dan Disable

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

Lihat kode di Github | Lihat Live Demo

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:

Mengatur Posisi Dropdown Kanan

Mengatur Posisi Dropdown Kiri

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

Lihat kode di Github | Lihat Live Demo

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:

Mengatur Dropdown Menjadi di Posisi Kanan

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

Lihat kode di Github | Lihat Live Demo

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:

Mengatur Dropdown Menjadi di Posisi Atas (Dropup)

<div class="dropup">

Lihat kode di Github | Lihat Live Demo

Teks Dropdown

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

Teks Dropdown

<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>

Lihat kode di Github | Lihat Live Demo

Membuat Tombol Group dengan Dropdown

Berikut adalah contoh beserta cara membuatnya:

Membuat Tombol Group dengan Dropdown

<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>

Lihat kode di Github | Lihat Live Demo

Membuat Tombol Dropdown Terpisah

Berikut adalah contoh beserta cara membuatnya:

Membuat Tombol Dropdown Terpisah

<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>

Lihat kode di Github | Lihat Live Demo

Membuat Tombol Group dengan Dropdown Vertikal

Berikut adalah contoh beserta cara membuatnya:

Membuat Tombol Group dengan Dropdown Vertikal

<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>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar