Bootstrap 4 Bilah Navigasi
Bilah Navigasi
Bilah navigasi adalah header navigasi yang ditempatkan di bagian atas halaman:
Navbar Dasar
Dengan Bootstrap, bilah navigasi dapat diperpanjang atau diciutkan, tergantung pada ukuran layar.
Bilah navigasi standar dibuat dengan .navbar
kelas, diikuti oleh kelas penciutan responsif: .navbar-expand-xl|lg|md|sm
(menumpuk bilah navigasi secara vertikal pada layar ekstra besar, besar, sedang, atau kecil).
Untuk menambahkan tautan di dalam bilah navigasi, gunakan <ul>elemen dengan class="navbar-nav". Kemudian tambahkan <li>elemen dengan .nav-itemkelas diikuti oleh <a>elemen dengan .nav-linkkelas:
Contoh
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Navbar Vertikal
Hapus .navbar-expand-xl|lg|md|smkelas untuk membuat bilah navigasi vertikal:
Contoh
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Navbar Terpusat
Tambahkan .justify-content-centerkelas untuk memusatkan bilah navigasi.
Contoh berikut akan memusatkan bilah navigasi pada layar sedang, besar, dan ekstra besar. Pada layar kecil itu akan ditampilkan secara vertikal dan rata kiri (karena kelas .navbar-expand-sm):
Contoh
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Navbar Berwarna
Gunakan salah satu .bg-colorkelas untuk mengubah warna latar belakang navbar ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkdan .bg-light)
Tips: Tambahkan warna teks putih ke semua tautan di bilah navigasi dengan .navbar-darkkelas, atau gunakan .navbar-lightkelas untuk menambahkan
warna teks hitam .
Contoh
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Status aktif/dinonaktifkan : Tambahkan .activekelas ke
<a>elemen untuk menyorot tautan saat ini, atau .disabledkelas untuk menunjukkan bahwa tautan tidak dapat diklik.
Merek / Logo
Kelas .navbar-branddigunakan untuk menyorot merek/logo/nama proyek halaman Anda:
Contoh
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Saat menggunakan .navbar-brandkelas pada gambar, Bootstrap 4 akan secara otomatis menata gambar agar sesuai dengan navbar secara vertikal.
Contoh
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Menutup Bilah Navigasi
Sangat sering, terutama di layar kecil, Anda ingin menyembunyikan tautan navigasi dan menggantinya dengan tombol yang akan menampilkannya saat diklik.
Untuk membuat bilah navigasi yang dapat dilipat, gunakan tombol dengan . Kemudian bungkus konten navbar (tautan, dll) di dalam elemen div dengan , diikuti dengan id yang cocok dengan tombol: " target ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Contoh
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Tip: Anda juga dapat menghapus kelas .navbar-expand-md untuk SELALU menyembunyikan tautan navbar dan menampilkan tombol pengalih.
Navbar Dengan Dropdown
Navbars juga dapat menahan menu dropdown:
Contoh
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Formulir dan Tombol Navbar
Tambahkan <form>elemen dengan class="form-inline"untuk mengelompokkan input dan tombol secara berdampingan:
Contoh
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Anda juga dapat menggunakan kelas masukan lain, seperti .input-group-prependatau .input-group-appenduntuk melampirkan ikon atau teks bantuan di sebelah bidang masukan. Anda akan mempelajari lebih lanjut tentang kelas-kelas ini di bab Input Bootstrap.
Contoh
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
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-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</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 .fixed-topmembuat bilah navigasi diperbaiki di atas :
Contoh
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Gunakan .fixed-bottomkelas untuk membuat bilah navigasi tetap di bagian bawah halaman:
Contoh
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>