Cara Membuat Navbar dengan Bootstrap 4 dengan Mudah – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan menjelaskan tentang cara membuat navbar menggunakan bootstrap 4. Seelah saya sebelumnya membahas tentang nav menu kali ini kita akan belajar membuat navbar. Navbar biasanya ada pada header suatu website dan akan jadi menu navigasi yang berisi menu-menu dan juga logo dari website. Navbar juga bisa dibuat fixed top atau posisinya akan selalu diatas walaupun telah discroll atau fixed bottom atau posisiya akan selalu dibawah jika discroll.
Cara membuatnya sangat mudah. Kita tidak perlu lagi membuat cssnya karena semua sudah dibuat oleh bootstrap, kita hanya perlu memasukkan librari css dari bootstrap. Berikut macam-macam navbar namun sebelum membuat contoh dibawah ini sobat perlu memasukkan kode css dan javascript terlebih dahulu pada tag <head>. Kodenya adalah sebagai berikut
|
1 2 3 4 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> |
Pastikan project sobat sudah tersedia semua plugin css dan js diatas karena jika tidak ada salah satu maka akan menyebabkan tidak berjalannya navbar seperti pada contoh ini. Karena untuk kepentingan demo jadi saya menggunakan css dan js online namun jika sobat ingin membuatnya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau bisa sobat download bersama project pada postingan ini di akhir postingan. Untuk warnanya adalah warna standar bawaan dari bootstrap bisa sobat ganti sesuai keinginan sobat.
1. Brand Website
Pada contoh pertama kita akan membahas tentang brand dari suatu website yang bisa sebuah gambar/logo, tulisan atau logo dan tulisan. Contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- As a link --> <nav class="navbar navbar-light bg-success mb-3"> <a class="navbar-brand" href="#">Navbar</a> </nav> <!-- Just an image --> <nav class="navbar navbar-light bg-danger mb-3"> <a class="navbar-brand" href="#"> <img src="logo.png" width="60" height="30" alt=""> </a> </nav> <!-- Image and text --> <nav class="navbar navbar-light bg-info mb-3"> <a class="navbar-brand" href="#"> <img src="logo.png" width="60" height="30" class="d-inline-block align-top" alt=""> Bootstrap </a> </nav> |
Kode diatas akan menghasilkan tampilan seperti dibawah
2. Standar Navbar
Jika kita menggunakan navbar bawaan bootstrap ini sudah otomatis responsive design jadi kita tidak perlu repot-repot untuk membuat tampilan di segala gadget yang digunakan. Contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav class="navbar navbar-expand-lg navbar-light bg-success mb-3"> <a class="navbar-brand" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
3. Navbar Align Right
Untuk contoh diatas, menu-menunya ada di sebelah kiri. Namun kita bisa juga membuatnya di sebelah kanan yaitu seperti berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav class="navbar navbar-expand-lg navbar-light bg-primary mb-3"> <a class="navbar-brand" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
4. Navbar dengan Dropdownlink
Kita juga bisa menambahkan dropdownlink pada navbar yang menamdakan sub menu dari menu yang ada. Contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<nav class="navbar navbar-expand-lg navbar-light bg-warning mb-3"> <a class="navbar-brand" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
5. Navbar dengan tambahan teks
Kita juga bisa menggabungkan dengan elemen html lainnya seperti teks pada navbar. Contohnya yaitu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav class="navbar navbar-expand-lg navbar-light bg-danger"> <a class="navbar-brand text-white" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Pricing</a> </li> </ul> <span class="navbar-text text-white"> Navbar text with an inline element </span> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
6. Navbar dengan form search
Navbar juga bisa digabungkan dengan menu search seperti dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<nav class="navbar navbar-expand-lg navbar-light bg-success"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Dewan Komputer</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
7. Navbar Dengan Toggle di Sebalah Kanan dan Brand Sebelah kiri
Tampilan ini jika dibuka di laptop akan menghasilkan tampilan yang sama namun jika dibuka di smartphone akan berbeda, lihat contoh dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<nav class="navbar navbar-expand-lg navbar-light bg-primary"> <a class="navbar-brand" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
8. Brand Tidak Terlihat dalam Mode Responsive Design
Contoh dibawah sama saat tampilan di laptop tidak ada bedanya namun jika dibuka di smartphone maka brand tidak terlihat. Brand akan muncul hanya jika di klik hamburgernya, ini biasanya digunakan apabila logo+teksnya sangat panjang dan menjadikan brand dan hamburger tidak sejajar. Penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<nav class="navbar navbar-expand-lg navbar-light bg-info"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
Hasilnya pada tampilan laptop
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab
9. Menu collapse
Selain contoh-contoh diatas, kita juga bisa menambahkan menu collapse sehingga saat pada tampilan responsive design akan muncul diatas icon hamburger.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="pos-f-t"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div> |
Hasilnya
Bagaimana mudah bukan jika menggunakan bootstrap? Jika kita membuatnya sendiri pasti akan lebih panjang prosesnya karena kita harus membuat cssnya terlebih dahulu. Sobat bisa kreasikan navbar ini sesuai keinginan dan kebutuhan dan juga bisa gabungkan dengan elemen bootstrap lainnya untuk menjadikan navbar semakin menarik. Untuk warnanya pada contoh diatas saya gunakan acak namun sebenarnya sobat bisa menggantinya dengan warna bawaan bootstrap yang sudah saya bahas pada tutorial-tutorial bootstrap lainnya jadi intinya sama seperti pewarnaan button, teks,dll. Kita hanya perlu mengganti class .bg-success, .bg-danger, .bg-primary, dan masih banyak lagi.
Sekian postingan saya tentang Membuat Navbar dengan Bootstrap 4 dengan Mudah. Apabila ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada kolom yang sudah disediakan. Kunjungi juga postingan saya yang lain untuk menambah ilmu sobat.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Membuat Nested Media Object pada Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :