Cara menggunakan mengatur jarak navbar bootstrap

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.

Table of Contents Show

Basic Navbar
Navbar Button
Navbar Dropdown
Navbar Search
Right-Aligned Navbar
Fixed Navbar
Navbar Responsive

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

ads by posciety

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:

Baca Juga:

8 Warna Favorit Ini Dapat Melambangkan Kepribadianmu

Apakah Situs Web Anda Mobile-Friendly?

Scrollspy Bootstrap

3 Struktur Dasar Form Bootstrap yang HARUS Kamu Ketahui Saat Membuat…

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

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

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 !

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

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.

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:

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

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.