Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navbar

TrikSonic - Tutorial kali ini kita akan belajar tentang cara membuat navbar dengan menggunakan bootstrap 3.

Apa itu navbar ? navbar adalah bar navigasi atau blok navigasi yang digunakan pada sebuah halaman html atau sebuah aplikasi yang pada umumnya berada diposisi atas sebuah dokumen.

Dengan menggunakan Bootstrap, keperluan untuk membuat navabar dapat dilakukan atau dibuat dengan cepat efisien dan modern serta yang tidak kalah penting adalah desain responsive pada semua perangkat

Berikut tutorial dan contoh tentang Navbar dengan menggunakan Bootstrap 3 :

Bootstrap 3 - Default navbar

Default navbar adalah komponen dasar penggunaan bootstrap navbar, nama class yang digunakan adalah .navbar-default yang ditulis pada class dasarnya .navbar

Cara penulisan :

<nav class="navbar navbar-default">
...
</nav>

Contoh :

<nav class="navbar navbar-default">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <!-- tombol membuka dropdown [media responsive] -->
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <!-- Nama Blog / website -->
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    
    <div class="collapse navbar-collapse" id="collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <!-- tombol membuka dropdown list-->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown <span class="caret"></span>
          </a>
          <!-- dropdown list -->
          <ul class="dropdown-menu">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
          </ul>
        </li>
      </ul>
    </div>
    
  </div>
</nav>

Bootstrap 3 - Inverted navbar

Jika tidak ingin dengan tampilan warna pada navbar default, bootstrap juga memberikan warna lainnya yaitu hitam dengan tingkat kepekatan diatas sedang, yang mempunyai nilai warna : #222;

Untuk menerapkannya, cukup menambahkan class .navbar-inverse ke class dasar .navbar

Cara Penulisan :

<nav class="navbar navbar-inverse">
...
</nav>

Contoh :

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
</nav>

Bootstrap 3 - Navbar Forms dan Dropdown Menu

Berikut contoh yang bisa dipelajari untuk membuat navbar dengan memasukan sebuah form dan menu dropdown

Contoh :

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    <!-- form -->
    <form class="navbar-form navbar-left">
      <div class="input-group">
        <input class="form-control" type="text"/>
        <span class="input-group-btn">
        <!--ganti nilai dari type button, sesuai dengan keperluan-->
        <button class="btn btn-default" type="button">Search</button>
        </span>
      </div>
    </form>
  </div>
</nav>

Bootstrap 3 - Navbar Brand image

Digunakan untuk mengganti teks Judul dengan sebuah gambar. Mungkin css tambahan diperlukan agar tampilan sesuai dengan keinginan.

Contoh :

<style>
/*custom css navbar brand*/
.navbar-brand.triksonic-logo {
  /*property : value*/
}
</style>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand triksonic-logo" href="#">
       <!-- Logo image-->
        <img alt="demo" src="..."/>
      </a>
    </div>
  </div>
</nav>

Bootstrap 3 - Navbar Buttons

Digunakan untuk menambahkan sebuah tombol atau button, yang mungkin dipergunakan untuk fungsi dari javascript. Tambahakan class .navbar-btn pada class dasar .btn, misal seperti ini :

<button class="btn btn-default navbar-btn">Button</button>
<button class="btn btn-primary navbar-btn">Button</button>
<button class="btn btn-danger navbar-btn">Button</button>
etc..

Contoh :

<!-- navbar 1 open -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-primary navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 1 close -->


<!-- navbar 2 open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-danger navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 2 close -->

Bootstrap 3 - Navbar Text

Digunakan untuk menuliskan sebuah teks biasa, didalam navbar. Untuk penerapan gunakan class .navbar-text pada element html, misal <p> atau <div>

Contoh :

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!-- navbar text open-->
    <div class="navbar-text">Teks Biasa</div>
    <div class="navbar-text">Teks Biasa</div>
    <!-- navbar text close-->
  </div>
</nav>

Bootstrap 3 - Navbar Component alignment

Digunakan untuk mengatur posisi atau keselarasan element. Untuk penerapannya gunakan class .navbar-left atau .navbar-right pada element HTML yang ingin diatur posisi nya.

Sebenarnya Bootstrap 3 sudah menyediakan class tertentu untuk mengatur keselarasan element, seperti .pull-left dan .pull-right, tapi untuk tampilan navbar yang tepat disemua perangkat penggunaan class .navbar-left atau .navbar-right lebih disarankan

Contoh 1 :

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    
    <!-- form -->
    <form class="navbar-form navbar-right">
        <input class="form-control" type="text"/>
    </form>
    
  </div>
</nav>

Bootstrap 3 - Navbar Fixed to top

Digunakan untuk membuat navbar memiliki posisi tetap berada di atas dan lepas dari gulir sebuah halaman

Untuk menerapkannya tambahkan class .navbar-fixed-top pada class dasar .navbar

Contoh :

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>

Bootstrap 3 - Navbar Fixed to bottom

Digunakan untuk membuat navbar memiliki posisi tetap berada di bawah dan lepas dari gulir sebuah halaman

Untuk menerapkannya tambahkan class .navbar-fixed-bottom pada class dasar .navbar

Contoh :

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>