Macam-Macam Navbar Bootstrap dan Cara Membuatnya

Navigation Bar atau yang biasa disingkat Navbar merupakan kumpulan item menu sebagai petunjuk yang umumnya diletakkan dibagian atas sebuah tata letak situs, banyak jenis Navbar yang bisa digunakan jika menggunakan framework Bootstrap. berikut ini beberapa Navbar Bootstrap yang perlu kamu ketahui.

Basic Navbar

Dasarnya, Navbar terdiri dari susunan beberapa link yang disebut menu dan biasanya disisipkan logo atau nama situs di sisi kirinya.

gambar 1 - basic navbar bootstrap

Ini adalah tampilan dasar dari sebuah Navbar sebelum dipoles desain dan elemen-elemen lainnya, untuk membuat Basic Navbar Bootstrap cukup gunakan strukutr kode seperti berikut:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Posciety.Com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 1</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 2</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
  </div>
</nav>

Pastikan kamu menerapkannya di bagian atas (dalam body) agar tampil di bagian atas situs web.

Navbar Button

Navbar Button adalah sebuah Navbar basic yang ditambah tombol di Navbar, beberapa situs menggunakan ini untuk mendapatkan perhatian lebih dari para pengunjung untuk melihat menu dan memancing untuk mengkliknya. Berikut struktur kode yang digunakan:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="https://www.posciety.com" target="_blank">Posciety.Com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 1</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 2</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
    <button class="btn btn-success navbar-btn">Menu Tombol</button>
  </div>
</nav>

Hanya ditambahkan button pada bagian dimana kamu ingin menampilkan tombol pada Navbar, hasil dari kodingan di atas maka akan terlihat seperti ini:

gambar 2 - navbar button bootstrap

Seperti yang terlihat pada gambar di atas, tombol tersebut berwarna hijau. Kamu dapat mengubah ukuran tombol dan warna tombol menggunakan Contextual Classes seperti yang pernah dijelaskan pada tutorial Bootstrap sebelumnya.

Navbar Dropdown

Navbar Dropdown adalah Navbar yang mengandung menu dropdown di dalamnya, ini biasanya digunakan bagi situs yang memiliki banyak kategori yang ditampilkan di Navbar. Salahsatu langkah tepatnya adalah menggunakan dropdown menu pada Navbar.

gambar 3 - navbar dropdown menu

Seperti yang terlihat di atas, terdapat tanda panah ke bawah pada Menu 1 dan Menu 2 yang menandakan bahwa terdapat sub menu atau anak menu di dalamnya. Ketika di klik, akan muncul sub menu tersebut. Untuk membuat ini, kamu hanya perlu menambahkan beberapa kode pada Navbar yang telah kita buat di atas.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Posciety.Com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
    <button class="btn btn-success navbar-btn">Menu Tombol</button>
  </div>
</nav>

Terdapat class dropdown pada li yang akan dijadikan sebagai parent, dan berikan class dropdown-menu pada ul sub menunya. Simpan dan lihat hasilnya !

Navbar Search

Merupakan Navbar yang memiliki formulir pencarian di dalamnya, seperti ini:

gambar 4 - navbar bootstrap dengan kolom search

Beberapa situs menampilkan kolom pencarian / search form di dalam Navbar seperti yang terlihat pada contoh di atas, tidak hanya bidang pencarian saja tapi juga menampilkan ikon search. Ini tidak wajib menggunakan ikon, karena sistem pencarian bisa dilakukan dengan menekan tombol Enter pada keyboard. Untuk membuat seperti ini, cukup tambahkan formulir (form) di dalamnya, contoh:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Posciety.Com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
    <button class="btn btn-success navbar-btn">Menu Tombol</button>
    <form class="navbar-form navbar-left" action="/action_page.php">
        <div class="input-group">
           <input type="text" class="form-control" placeholder="Cari...">
           <div class="input-group-btn">
               <button class="btn btn-default" type="submit">
                   <i class="glyphicon glyphicon-search"></i>
               </button>
           </div>
       </div>
    </form>
  </div>
</nav>

Jika menggunakan Bootstrap 4, hapus saja glyphicon pada struktur kode karena Bootstrap 4 berbeda dengan Bootstrap 3 yang masih support glyphicons.

Beberapa website juga mengganti ikon search dengan tombol Submit untuk keperluan lain seperti subscribe / berlangganan newsletter.

Right-Aligned Navbar

Merupakan Navbar yang memiliki item di sisi kanannya, seperti yang kita ketahui dari contoh-contoh di atas semuanya berjajar kiri. Item yang berada di kanan biasanya digunakan untuk menu tambahan seperti login / register.

Cukup berikan ul baru di paling bawah (sebelum penutup nav) dengan class navbar-right seperti berikut:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Posciety.Com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
    <button class="btn btn-success navbar-btn">Menu Tombol</button>
    <form class="navbar-form navbar-left" action="/action_page.php">
        <div class="input-group">
           <input type="text" class="form-control" placeholder="Cari...">
           <div class="input-group-btn">
               <button class="btn btn-default" type="submit">
                   <i class="glyphicon glyphicon-search"></i>
               </button>
           </div>
       </div>
    </form>
        <ul class="nav navbar-nav navbar-right">
      <li><a href="https://www.posciety.com" target="_blank"><span class="glyphicon glyphicon-user"></span> Register</a></li>
      <li><a href="https://www.posciety.com" target="_blank"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Hasilnya akan terlihat seperti ini:

gambar 5 - navbar bootstrap register login kanan

Tombol register dan login akan berjajar kanan seperti yang terlihat pada gambar di atas, akan ada jarak antara navbar biasa dan navbar-right karena navbar-right memang berjajar kanan.

Fixed Navbar

Fixed Navbar adalah Navbar yang menetap di bagian atas situs, walaupun di scroll ke bawah akan tetap menetap di atas. Ini menguntungkan agar para visitor tidak kesulitan scroll lagi ke atas hanya untuk melihat menu.

Cukup berikan class navbar-fixed-top pada bagian <nav> maka akan menjadi <nav class="navbar navbar-default navbar-fixed-top"> simpan dan lihat hasilnya !

Tidak hanya di bagian atas, sebetulnya bisa juga Navbar menetap di bagian bawah situs. Walaupun di scroll ke atas atau bawah Navbar akan tetap berada di bagian bawah layar. Ini juga memudahkan para visitor agar tidak kesulitan mencari menu, tapi ini jarang sekali digunakan.

Cukup berikan class navbar-fixed-bottom pada bagian <nav> maka akan menjadi <nav class="navbar navbar-default navbar-fixed-bottom"> simpan dan lihat hasilnya !

Fixed ini tidak menciut / mengecil ketika scroll, berbeda dengan .affix yang sebelumnya pernah di bahas yang mampu membuat navbar menciut / mengecil ketika scroll.

Navbar Responsive

Situs yang responsive pasti lebih enak dilihat ketika dibuka di perangkat yang lebih kecil seperti smartphone / tablet, begitupun Navbarnya harus responsive. Ini disebutnya Collapse, maka kita memerlukan class navbar-collapse. Seperti ini contohnya:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarPOS">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Posciety.Com</a>
    </div>
    <div class="collapse navbar-collapse" id="navbarPOS">
    <ul class="nav navbar-nav">
      <li class="active"><a href="https://www.posciety.com" target="_blank">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://www.posciety.com" target="_blank">Menu 2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://www.posciety.com" target="_blank">Sub 1</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 2</a></li>
          <li><a href="https://www.posciety.com" target="_blank">Sub 3</a></li>
        </ul>
      </li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 3</a></li>
      <li><a href="https://www.posciety.com" target="_blank">Menu 4</a></li>
    </ul>
    <button class="btn btn-success navbar-btn">Menu Tombol</button>
    <form class="navbar-form navbar-left" action="/action_page.php">
        <div class="input-group">
           <input type="text" class="form-control" placeholder="Cari...">
           <div class="input-group-btn">
               <button class="btn btn-default" type="submit">
                   <i class="glyphicon glyphicon-search"></i>
               </button>
           </div>
       </div>
    </form>
        <ul class="nav navbar-nav navbar-right">
      <li><a href="https://www.posciety.com" target="_blank"><span class="glyphicon glyphicon-user"></span> Register</a></li>
      <li><a href="https://www.posciety.com" target="_blank"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
 </div>
</nav>

Ini memerlukan id, berikan id pada tombol di atas kemudian bungkus nav terlebih dahulu pastikan id nya sama. Ketika dibuka di perangkat yang lebih kecil maka akan menampilkan burger menu di sebelah kanan yang berisi menu yang sama seperti pada desktop. Ini hanya berlaku di perangkat berukuran kecil, di desktop atau ukuran besar lainnya tetap menampilkan versi desktop.

Begitulah cara membuat Navbar di Bootstrap dan hal-hal yang perlu diketahui dalam membuat Navbar Bootstrap. Untuk masalah warna, kamu dapat memanfaatkan Contextual Classes Bootstrap.

tunggu sebentar...

POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi