Cara Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan memposting tentang cara membuat nav menu menggunakan Bootstrap 4 dengan mudah karena kita tidak perlu membuat cssnya lagi. Kita hanya perlu memasukkan librari dari bootstrap. Nav menu ini berguna sebagai navigasi dari suatu website atau aplikasi. Setiap website pasti akan ada nav menu yang berfungsi untuk memanggil/menampilkan semua menu yang ada pada website tersebut. Cara pembuatannya sangat mudah, sobat cukup gunakan nav menu mana yang sesuai dengan website sobat.
Namun sebelum saya contohkan cara penggunaannya, sobat perlu memasukkan librari css dan jsnya pada tag <head>
|
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> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
Kita memerlukan librari bootstrap tentunya, selain itu saya juga menambahkan jquery dan css fontawesome karena pada contoh nanti saya juga akan mencontohkan tab dengan icon sehingga jika sobat belum memasukkan librari fontawesome maka icon tidak akan muncul. Dan karena untuk keperluan demo jadi saya menggunakan librari online, jika untuk kepentingan development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa download bersama project ini di akhir postingan.
Macam-macam Nav Menu
1. Nav Menu List Horizontal
Nav menu ini adalah nav menu standar yang tampilannya adalah horizontal. Dengan menggunakan nav ini dita juga bisa menambahkan class active dan class disabled. Jika kita menambahkan class disable maka link tidak bisa diklik. Cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Tampilannya :
2. Nav Menu Link Horizontal
Sebenarnya baik menggunakan link atau tidak sama saja hasilnya, sobat bisa gunakan manapun sesuai keinginan sobat. Cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 |
<nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> |
Hasilnya tentu sama saja yaitu
3. Nav Menu List Vertical
Selain posisinya secara horizontal, kita juga bisa membuatnya secara vertical, contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Hasilnya :
4. Nav Menu Link Vertical
Sama seperti yang horizontal, kita juga bisa membuat nav menu secara vertical dengan menggunakan link. Cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 |
<nav class="nav flex-column"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> |
Tampilannya :
5. Nav menu dengan Text Align
Pada nav menu kita juga bisa menempatkannya di sebelah kiri, tengah dan kanan. Untuk contoh di sebelah kiri merupakan cara standar jadi yang kita bahas adalah align tengah dan kanan saja. Cara penggunaan untuk di tengah adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Hasilnya :
Jika kita ingin membuat nav menunya di sebelah kanan maka kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Hasilnya :
6. Nav Tab
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Hasilnya :
7. Nav Tab Pill
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" 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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> |
Hasilnya :
8. Nav Tab Dropdown
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </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> |
Hasilnya :
9. Nav Tab Dropdown Pills
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </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> |
Hasilnya :
10. Nav dengan Icon dan Javascript
Contoh kali ini kita akan membuat tab dengan icon dan tidak seperti contoh diatas kali ini kita jalankan tabnya jika diklik. Cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><i class="fa fa-home"></i> Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><i class="fa fa-image"></i> Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"><i class="fa fa-phone"></i> Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> Home </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> Profile </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> Contact </div> </div> |
Hasilnya
Selain itu kita juga bisa membuatnya menggunakan jenis nav pills. 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 |
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false"><i class="fa fa-phone"></i> Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> Home </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> Profile </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> Contact </div> </div> |
Hasilnya :
Untuk contohnya tidak terlihat jika hanya dengan foto, sobat bisa lihat dan mencobanya sendiri pada demonya.
11. Nav dengan data atribut dan fade effect
|
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 30 31 |
<!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="homeDA-tab" data-toggle="tab" href="#homeDA" role="tab" aria-controls="homeDA" aria-selected="true"><i class="fa fa-home"></i> Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profileDA-tab" data-toggle="tab" href="#profilesDA" role="tab" aria-controls="profileDA" aria-selected="false"><i class="fa fa-image"></i> Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="messagesDA-tab" data-toggle="tab" href="#messagesDA" role="tab" aria-controls="messagesDA" aria-selected="false"><i class="fa fa-envelope"></i> Messages</a> </li> <li class="nav-item"> <a class="nav-link" id="settingsDA-tab" data-toggle="tab" href="#settingsDA" role="tab" aria-controls="settingsDA" aria-selected="false"><i class="fa fa-cog"></i> Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="homeDA" role="tabpanel" aria-labelledby="homeDA-tab"> Home </div> <div class="tab-pane" id="profilesDA" role="tabpanel" aria-labelledby="profileDA-tab"> Profile </div> <div class="tab-pane" id="messagesDA" role="tabpanel" aria-labelledby="messagesDA-tab"> Messages </div> <div class="tab-pane" id="settingsDA" role="tabpanel" aria-labelledby="settingsDA-tab"> Settings </div> </div> |
Contoh dibawah adalah jika menggunakan fade effect :
|
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 |
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="homeFE-tab" data-toggle="tab" href="#homeFE" role="tab" aria-controls="homeFE" aria-selected="true"><i class="fa fa-home"></i> Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profileFE-tab" data-toggle="tab" href="#profileFE" role="tab" aria-controls="profileFE" aria-selected="false"><i class="fa fa-image"></i> Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="messagesFE-tab" data-toggle="tab" href="#messagesFE" role="tab" aria-controls="messagesFE" aria-selected="false"><i class="fa fa-envelope"></i> Messages</a> </li> <li class="nav-item"> <a class="nav-link" id="settingsFE-tab" data-toggle="tab" href="#settingsFE" role="tab" aria-controls="settingsFE" aria-selected="false"><i class="fa fa-cog"></i> Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="homeFE" role="tabpanel" aria-labelledby="home-tab"> Home </div> <div class="tab-pane fade" id="profileFE" role="tabpanel" aria-labelledby="profile-tab"> Profile </div> <div class="tab-pane fade" id="messagesFE" role="tabpanel" aria-labelledby="messages-tab"> Messages </div> <div class="tab-pane fade" id="settingsFE" role="tabpanel" aria-labelledby="settings-tab"> Settings </div> </div> |
Hasilnya :
Untuk bedanya tentu tidak kelihatan di sreenshootnya oleh karena itu sobat harus melihtanya pada demonya.
Untuk kreasi yang lain bisa sobat gabungkan dengan elemen bootstrap lainnya untuk membuatnya lebih berwarna dan lebih bagus. Cukup sekian postingan saya tentang Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah. Jika ada kesalahan saya mohon maaf. Kunjungi 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 Card Menu pada HTML Dengan Bootstrap 4
List Style dan Listgroup pada CSS dan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :