Membuat Navigation Bar pada Bootstrap
Membuat Navigation Bar pada Bootstrap – Navigation bar, menu navigasi atau biasa disebut navbar, menurut saya adalah salah satu komponen penting dari sebuah website. Di dalamnya bisa berisi jalan pintas menuju ke halaman – halaman unggulan milik kita, seperti Profil, Sejarah, Tentang, Halaman Kontak sampai form pencarian.
Baca juga: Membuat Contact Form CSS.
Membuat Navigation Bar pada Bootstrap
Seperti biasa, kita akan mencoba membuat bagian ini menggunakan Bootstrap. Caranya sangat mudah, hanya menambahkan class yang sudah disediakan oleh Bootstrap. Kita mulai dengan yang paling sederhana yaitu menu horizontal basic. Buat sebuah file HTML, lalu pastekan kode ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>codelatte.id</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Membuat Navigation Bar pada Bootstrap | codelatte.id</h2>
<p>Navbar horizontal basic:</p>
<ul class="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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Hasilnya akan menjadi seperti ini,
Basic Horizontal Menu
Membuat Dropdown pada Navbar Bootstrap
Jika memperhatikan navbar pada situs ini, saya menggunakan dropdown menu untuk halaman – halaman tentang situs ini. Bagaimana cara membuatnya? Gunakan kode dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>codelatte.id</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown Menu | codelatte.id</h2>
<ul class="nav">
<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="#">Dropdown</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>
<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>
</div>
</body>
</html>
Untuk demo nya bisa dilihat dibawah ini,
See the Pen Bootstrap Navbar | codelatte.id by Abay (@abaykan) on CodePen.
Class Tambahan
Ada beberapa class lain juga untuk bagian Navbar ini, diantaranya adalah:
.justify-content-center> Membuat navbar berada di tengah..justify-content-end> Navbar berada di kanan..flex-column> Vertical navbar..nav-tabs> Mengubah menu navigasi menjadi tab navigasi.
Sekian pembahasan tentang Membuat Navigation Bar pada Bootstrap, seperti biasa, jika ada yang ingin ditanyakan, silahkan isi kolom komentar. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya.
Bisa bikin navbar di bagian sidebar ga kang?
Bisa pake
mntaapp gan…tingkatkan lagii!!!
Gan kok yang saya dropdown-nya gak mau keluar ya?
File-file .js nya udah dipanggil juga gan?
Terdampar di website ni serasa menemukan harapan baru,
Sekarang ane stay disini,berpaling dari ebook2gua yg gajelas itu,he heh….,yang pasti bahasa translate ane merah