Bootstrap menyediakan berbagai pilihan dari variasi navigation bar. Ciri tampilan Navbar adalah collapsed (ditumpuk) pada layar sangat kecil dan akan berubah menjadi horizontal pada layar yang lebih lebar.
Navbar Dasar
Sebuah navigation bar pada bootstrap dihasilkan mengguanakan class .navbar pada sebuah elemen HTML5 <nav> atau bisa juga pada block element <div>...<div>, tetapi tambahkan attribute role="navigation" pada elemen block tsb.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Athharkautsar</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Komponen navbar lainnya seperti link, tombol, teks, dsb. -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>- Navbar dibentuk oleh elemen HTML <nav></nav> dengan class dasar navbar .navbar, sementara class tambahannya bisa .navbar-default atau bisa juga .navbar-inverse.
- Kemudian kontainer untuk mengatur lebar komponen-komponen navbar, jika memakai class .container-fluid, maka lebar komponen memenuhi seluruh lebar layar. Sedangkan jika menggunakan class .container, maka lebar komponen akan memenuhi sebagian layar
- Komponen header yang berisi tiga buah icon garis yang bersifat togleable (bisa ditampakan dan dihilangkan dengan mengkliknya) yang hanya akan nampak pada layar dengan lebar dibawah 768px
Elemen - elemen didalam navbar
Didalam navigation bar terdapat berbagai komponen, yang kalau semulanya disatukan dengan tepat, akan menghasilkan tampilan navbar yang ciamik.
Brand
Brand merupakan sebuah link dasar yang memperlihatkan merk atau nama proyek atau logo perusahaan.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Athharkautsar</a>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Elemen Toggle Button
Elemen Toggle Button diperlukan untuk menyembunyikan dan menampilkan komponen navbar lainnya. Pada lebar layar dibawah 768px elemen toggle button akan tampil sementara elemen navbar lainnya disembunyikan, pada layar lebih besar dari 768px elemen toggle button akan hilang sementara komponen navbar lainnya ditampilkan.
Agar tampil sempurna, elemen toggle button ini membutuhkan Javascript collapse plugin.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Athharkautsar</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Hasil dari sktip tersebut bisa dilihat dibawah ini. (Klik tombol result jika hasil tidak muncul)
Elemen Form
Kita juga dapat menampilkan elemen form didalam navbar menggunakan class .navbar-form dan tambahkan class .navbar-left atau .navbar-right untuk meletakan elemen form tersebut disebelah kiri/kanan didalam navbar.
Berikut contoh skrip memasukkan elemen form input field (<input>) dan tombol (<button>) ke dalam navbar.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Elemen Tombol (Button)
Jika kita ingin menambahkan tombol diluar komponen form didalam navbar maka gunakan class .navbar-btn pada elemen <button> agar tampil sesuai di dalam navbar.
Class .navbar-btn dapat dapat digunakan pada elemen anchor link (<a>) dan elemen , <input>, namun jangan menggunakan dua elemen tersebut (<a> dan <input>) dalam kontainer yang mengandung class .navbar-nav seperti dalam komponen navbar link.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Elemen Nav Links
Item-item link di dalam navbar dibentuk dengan menggunakan unordered list (<ul>) dengan class dasar .nav dan class tambahan .navbar-nav.
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>Elemen teks
Kita dapat memasukan teks didalam navbar dengan menambahkan class .navbar-text pada elemen pembukus teks tersebut (<p></p>).
<p class="navbar-text">Signed in as Admin</p>Elemen Non Nav Links
Jika kita ingin menggunakan link tapi ridak mau link tersebut masuk sebagai komponen navbar, maka tambahkan class .navbar-link pada link tersebut
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Admin</a></p>Memposisikan elemen dalam navbar
Untuk menempatkan sebuah komponen di kiri atau di kana navbar, kita bisa gunakan class .navbar-left dan .navbar-right
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika elemen tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Posisi Navbar
Pada hakekatnya, navbar merupakan elemen block-level yang posisinya tergantung kepada penempatannya dalam HTML. Namun dengan bebrapa class bantu, kita dapat menempatkannya secara dinamis, baik itu diatas halaman, dibawah halaman ataupun ikut menggulung (scroll) bersama halaman
Fixed To Top Navbar
Pada posisi ini, navbar diletakkan diatas, navbar akan selalu muncul diatas ketika halaman discroll kebawah. Adapun class yang digunakan .navbar-fixed-top pada elemen container navbar yang paling luar menggunakan class .navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Fixed To Bottom Navbar
Pada posisi ini, navbar diletakan dibawah halaman. Class yang digunakan .navbar-fixed-bottom yang ditambahkan pada elemen kontainer paling luar dari navbar.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Static Top Navbar
Pada posisi ini, navbar diletakkan di atas, navbar akan ikut menggulung bersama halaman ke atas ketika halaman digulung. Adapun class yang digunakan ialah .navbar-static-top
Untuk static top navbar tidak perlu menambahkan style padding pada elemen <body>.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Inverted Navbar
Untuk mengasilkan navbar dengan warna latar belakang hitam dan tampilan teks berwarna putih, kita tambahkan class .navbar-inverse pada kontainer paling luar dari navbar tersebut.
<nav class="navbar navbar-inverse">
...
</nav>Catatan:
Navigation bar membutuhkan jQuery untuk memunculkan toggle button, jika di template kalian belum ada kode jQuery maka pasanglah kode dibawah ini dan pasang diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
