Offcanvas Bootstrap 5

Offcanvas (Kain)

Offcanvas mirip dengan modal (dihida secara default dan ditampilkan saat diaktifkan), perbedaan utamanya adalah bahwa ia biasanya digunakan sebagai menu navigasi samping.

Bagaimana membuat Sidebar Offcanvas

Berikut ini menunjukkan bagaimana untuk membuat sidebar offcanvas:

Contoh

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Judul</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Beberapa teks. Beberapa teks. Beberapa teks.</p>
    <p>Beberapa teks. Beberapa teks. Beberapa teks.</p>
    <button class="btn btn-secondary" type="button"> Tombol</button>
  </div>
</div>
<!-- Tombol untuk membuka sidebar offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Buka Sidebar Offcanvas
</button>

Coba Sendiri

Pengertian Contoh

.offcanvas kelas membuat sidebar offcanvas.

.offcanvas-start kelas menempatkan offcanvas dan mengatur lebarnya menjadi 400px. Untuk informasi lebih lanjut tentang kelas lokasi, lihat contoh di bawah ini.

.offcanvas-title kelas memastikan margin dan tinggi baris yang sesuai.

Lalu, tambahkan konten Anda ke .offcanvas-body kelas.

Untuk membuka sidebar offcanvas, Anda harus menggunakan <button> atau <a> elemen menunjuk .offcanvas ID kontainer (dalam contoh kami adalah #demo）。

Untuk menggunakan <a> Elemen membuka sidebar offcanvas, Anda dapat menggunakan atribut href daripada data-bs-target Atribut Menunjuk #demo.

Letakan Offcanvas

Gunakan .offcanvas-start|end|top|bottom Letakkan offcanvas ke kiri, kanan, atas, atau bawah:

Contoh Kanan

<div class="offcanvas offcanvas-end" id="demo">

Coba Sendiri

Contoh Atas

<div class="offcanvas offcanvas-top" id="demo">

Coba Sendiri

Contoh Bawah

<div class="offcanvas offcanvas-bottom" id="demo">

Coba Sendiri