Bilah Navigasi Bootstrap
Bilah Navigasi
Bilah navigasi adalah header navigasi yang ditempatkan di bagian atas halaman:
Dengan Bootstrap, bilah navigasi dapat diperpanjang atau diciutkan, tergantung pada ukuran layar.
Bilah navigasi standar dibuat dengan <nav class="navbar navbar-default">.
Contoh berikut menunjukkan cara menambahkan bilah navigasi ke bagian atas halaman:
Contoh
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Catatan: Semua contoh di halaman ini akan menampilkan bilah navigasi yang memakan terlalu banyak ruang di layar kecil (namun, bilah navigasi akan berada di satu baris di layar besar - karena Bootstrap responsif). Masalah ini (dengan layar kecil) akan diselesaikan dalam contoh terakhir di halaman ini.
Bilah Navigasi Terbalik
Jika Anda tidak menyukai gaya bilah navigasi default, Bootstrap menyediakan bilah navigasi hitam alternatif:
Cukup ubah .navbar-defaultkelas menjadi .navbar-inverse:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Bilah Navigasi Dengan Dropdown
Bilah navigasi juga dapat menahan menu tarik-turun.
Contoh berikut menambahkan menu tarik-turun untuk tombol "Halaman 1":
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Bilah Navigasi Rata Kanan
Kelas .navbar-rightdigunakan untuk menyelaraskan tombol bilah navigasi.
Dalam contoh berikut, kami menyisipkan tombol "Sign Up" dan tombol "Login" di sebelah kanan di bilah navigasi. Kami juga menambahkan glyphicon pada masing-masing dari dua tombol baru:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Tombol Navbar
Untuk menambahkan tombol di dalam navbar, tambahkan .navbar-btnkelas pada tombol Bootstrap:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Formulir Navbar
Untuk menambahkan elemen formulir di dalam bilah navigasi, tambahkan .navbar-formkelas ke elemen formulir dan tambahkan input. Perhatikan bahwa kami telah menambahkan .form-groupkelas ke wadah div yang menyimpan input. Ini menambahkan padding yang tepat jika Anda memiliki lebih dari satu input (Anda akan mempelajari lebih lanjut tentang ini di bab Formulir).
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Anda juga dapat menggunakan .input-groupdan .input-group-addonkelas untuk melampirkan ikon atau teks bantuan di sebelah bidang masukan. Anda akan mempelajari lebih lanjut tentang kelas-kelas ini di bab Input Bootstrap.
Contoh
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Teks Navbar
Gunakan .navbar-textkelas untuk meratakan vertikal elemen apa pun di dalam bilah navigasi yang bukan tautan (memastikan padding dan warna teks yang tepat).
Contoh
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Bilah Navigasi Tetap
Bilah navigasi juga dapat diperbaiki di bagian atas atau bawah halaman.
Bilah navigasi tetap tetap terlihat di posisi tetap (atas atau bawah) terlepas dari gulir halaman.
Kelas .navbar-fixed-topmembuat bilah navigasi diperbaiki di bagian atas:
Contoh
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Kelas .navbar-fixed-bottommembuat bilah navigasi tetap di bawah:
Contoh
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Menutup Bilah Navigasi
Bilah navigasi sering memakan terlalu banyak ruang di layar kecil.
Kita harus menyembunyikan bilah navigasi; dan hanya ditampilkan saat dibutuhkan.
Dalam contoh berikut, bilah navigasi diganti dengan tombol di sudut kanan atas. Hanya ketika tombol diklik, bilah navigasi akan ditampilkan:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>