Membuat Simple Navbar dengan Bootstrap
Kalian dapat menggunakan komponen navbar Bootstrap untuk membuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar responsif ini awalnya gagal pada perangkat yang memiliki viewports kecil seperti ponsel tetapi berkembang ketika pengguna mengklik toggle button. Namun, akan tampil horisontal normal seperti pada perangkat menengah dan besar seperti laptop atau desktop.
Kalian juga dapat membuat variasi navbar yang berbeda seperti navbar dengan menu dropdown dan kotak pencarian serta navbar yang diposisikan tetap dengan tampilan sederhana. Contoh berikut akan menunjukkan cara membuat navbar statis sederhana dengan tautan navigasi.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
Output dari contoh di atas akan terlihat seperti ini:
Selain itu, alih-alih teks biasa, kalian juga dapat menempatkan gambar logo di dalam navbar. Namun, kalian perlu mengatur tinggi logo secara manual agar pas di dalam navbar, seperti yang ditunjukkan pada contoh berikut:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="#" class="navbar-brand">
<img src="images/logo.svg" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
Output dari contoh di atas akan terlihat seperti ini:
Catatan: Gunakan kelas utility seperti .ml-auto, .mr-auto, .justify-content-between, dll. Untuk menyelaraskan tautan nav, form, button, atau text di dalam navbar.
Menambahkan Dropdown ke Navbar
Kalian juga dapat memasukkan dropdown dan kotak pencarian di dalam navbars, seperti yang ditunjukkan di sini:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
</div>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
Output dari contoh di atas akan terlihat seperti ini:
Menempatkan Form Pencarian di dalam Navbar
Form pencarian adalah komponen yang sangat umum dari navbars dan kalian telah melihatnya cukup sering di berbagai situs web. Kalian dapat menempatkan berbagai control form dan komponen di dalam navbar menggunakan kelas .form-inline pada elemen <form>, seperti yang ditunjukkan dalam contoh berikut:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Products</a>
</div>
<form class="form-inline ml-auto">
<input type="text" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-light">Search</button>
</form>
</div>
</nav>
Output dari contoh di atas akan terlihat seperti ini:
Mengubah Skema Warna dari Navbar
Kalian juga dapat mengubah skema warna navbar dengan menggunakan .navbar-light untuk warna latar belakang terang, atau .navbar-dark untuk warna latar belakang gelap. Kemudian, sesuaikan dengan kelas utility background-color, seperti .bg-dark, .bg-primary, dan sebagainya.
Sebagai alternatif, kalian juga dapat menerapkan properti CSS background-color pada elemen .navbar sendiri untuk menyesuaikan tema navbar, seperti yang ditunjukkan dalam contoh berikut:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #ddeeff;">
<!-- Navbar content -->
</nav>
Output dari contoh di atas akan terlihat seperti ini:
Bootstrap Fixed Navbar
Bootstrap juga menyediakan mekanisme untuk membuat navbar yang tetap di bagian atas atau bawah viewport dan akan mengikuti konten halaman saat di scroll.
Membuat Navbar Tetap di Atas
Terapkan posisi kelas utility .fixed-top ke elemen .navbar untuk membuat navbar tetap di bagian atas viewport, sehingga tidak akan bergulir mengikuti halaman saat di scroll. Berikut contohnya:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<!-- Navbar content -->
</nav>
Membuat Navbar Tetap di Bawah
Demikian pula, tambahkan kelas .fixed-bottom pada elemen .navbar untuk membuat navbar tetap di bagian bawah viewport, seperti yang ditunjukkan pada contoh berikut:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
<!-- Navbar content -->
</nav>
Membuat Sticky Top Navbar
Kalian juga dapat membuat sticky top navbar yang bergulis mengikuti halaman sampai mencapai bagian atas, kemudian posisinya tetap di atas, dengan hanya menggunakan kelas .sticky-top pada elemen .navbar, seperti berikut ini:
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<!-- Navbar content -->
</nav>
Tips: Tempatkan konten fixed .navbar di dalam .container atau .container-fluid untuk padding yang tepat dan sejajar dengan sisa konten.
Catatan: Ingatlah untuk menambahkan padding (setidaknya 70px) ke atas atau bawah elemen <body> untuk mencegah konten masuk di bawah navbar sambil menerapkan navbar atas atau bawah yang tetap. Juga, pastikan untuk menambahkan style sheet custom kalian setelah file CSS Bootstrap inti, jika tidak, style rules dalam style sheet kalian mungkin akan ditimpa oleh Bootstrap.
