Navbar biasanya nongkrong di bagian atas halaman, jadi penghubung utama ke halaman-halaman penting di website. Tugasnya simpel: memudahkan pengunjung berpindah dari satu halaman ke halaman lain. Dengan desain yang rapi dan mudah dipahami, pengunjung bisa langsung menemukan yang mereka butuhkan tanpa banyak usaha.
Navbar yang terlalu banyak link menuju setiap halaman dapat membingungkan pengguna, sehingga penting untuk hanya menampilkan halaman yang relevan dan bernilai tinggi. Jika anda sudah memiliki banyak halaman gunakanlah sub menu untuk mengurangi kekacauan visual. Perlu diketahui bahwa tema ini mendukung sub menu hingga dua level saja dan tidak mendukung sub-sub menu, karena bisa membuat navigasi menjadi berlebihan.
Cara Input Navbar
Berikut langkah-langkah untuk mengatur navbar menu dengan efisien:
- Akses dashboard blogger anda
- Navigasikan ke menu tata letak
- Klik icon pensil (edit) pada widget Navbar
- Copas kode navbar ke kolom konten
- Klik Simpan untuk menyimpan perubahan widget
Kode Navbar
1. Navbar Basic
<a class='nav-link' href='#'>Menu 1</a>
<a class='nav-link' href='#'>Menu 2</a>
<a class='nav-link' href='#'>Menu 3</a>
<a class='nav-link' href='#'>Menu 4</a>
<a class='nav-link btn' role='button' target='_blank' href='#'>Kontak</a>Secara default kode navbar akan menampilkan link terakhir sebagai tombol, ini berfungsi untuk penekanan call to action. Anda bisa memanfaatkannya untuk mengarahkan pengunjung ke kontak admin atau halaman penting seperti ppdb. Berikut adalah tabel penjelasan agar anda lebih mudah melakukan penyesuaian:
| Attribute | Penjelasan |
|---|---|
href='#' |
Ganti tanda # dengan url link tujuan. |
class='btn' dan role='button' |
Menandai bahwa link akan berfungsi sebagai tombol. |
target='_blank' |
Link dibuka di tab baru, hapus jika tidak diperlukan. |
2. Navbar Dropdown
<a class='nav-link' href='#'>Menu 1</a>
<a class='nav-link' href='#'>Menu 2</a>
<div class='dropdown'>
<a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Menu 3
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Submenu 1</a>
<a class='dropdown-item' href='#'>Submenu 2</a>
<a class='dropdown-item' href='#'>Submenu 3</a>
</div>
</div>
<a class='nav-link' href='#'>Menu 4</a>
<a class='nav-link' href='#'>Menu 5</a>
<a class='nav-link btn' role='button' target='_blank' href='#'>Kontak</a>3. Navbar Serupa Live Demo
<a class='nav-link' href='/search/label/Artikel'>Artikel</a>
<div class='dropdown'>
<a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Profil
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='/p/visi-dan-misi.html'>Visi dan Misi</a>
<a class='dropdown-item' href='/search/label/Prestasi'>Prestasi</a>
<a class='dropdown-item' href='/search/label/Jurusan'>Jurusan</a>
<a class='dropdown-item' href='/search/label/Ekstrakurikuler'>Ekstrakurikuler</a>
<a class='dropdown-item' href='/search/label/Daftar Guru'>Guru dan Staf</a>
<a class='dropdown-item' href='/search/label/Fasilitas'>Fasilitas</a>
</div>
</div>
<div class='dropdown'>
<a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Informasi
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='/search/label/Agenda'>Agenda</a>
<a class='dropdown-item' href='/search/label/Pengumuman'>Pengumuman</a>
</div>
</div>
<a class='nav-link' href='#'>Beasiswa</a>
<a class='nav-link btn px-4' role='button' target='_blank' href='#'>
<svg class='svg-icon'><use xlink:href='#mortarboard'/></svg>
Pendaftaran
</a>