Dwi Prastyo
Dwi Prastyo
Online
Halo 👋
Ada yang bisa dibantu?

Mengatur Menu untuk Memudahkan Pengunjung Menavigasi Website

Pelajari cara optimal mengatur navbar menu untuk memudahkan pengunjung menemukan informasi penting dengan cepat dan efisien.

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:

  1. Akses dashboard blogger anda
  2. Navigasikan ke menu tata letak
  3. Klik icon pensil (edit) pada widget Navbar
  4. Copas kode navbar ke kolom konten
  5. Klik Simpan untuk menyimpan perubahan widget
Navbar

Kode Navbar

1. Navbar Basic

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

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

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

Berbagi

Posting Komentar