Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar Boostrap Bagian 18 : Cara Menambahkan Icon di Bootstrap, selanjutnya kita akan belajar cara membuat menu navigasi di Bootstrap.
Bootstrap menyediakan cara yang mudah dan cepat untuk membuat komponen navigasi dasar seperti tab dan pil yang sangat fleksibel dan elegan.
Semua komponen navigasi Bootstrap — tab dan pil — berbagi markup dan style dasar yang sama melalui class .nav dasar.
Membuat Nav Dasar dengan Bootstrap
Anda dapat menggunakan class Bootstrap .nav untuk membuat menu navigasi dasar, seperti ini:
<nav class="nav">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Penjajaran Item Nav
Secara default, navigasi rata kiri, tetapi Anda dapat dengan mudah menyelaraskannya ke tengah atau kanan menggunakan utilitas flexbox.
Contoh berikut menggunakan class .justify-content-center untuk meratakan item navigasi ke tengah.
<nav class="nav justify-content-center">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Demikian pula, Anda dapat menyelaraskan item navigasi ke kanan menggunakan class .justify-content-end, seperti ini:
<nav class="nav justify-content-end">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Selain itu, Anda bahkan dapat menumpuk item nav Anda secara vertikal dengan mengubah arah item fleksibel dengan class .flex-column, seperti yang ditunjukkan dalam contoh berikut:
<nav class="nav flex-column">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Membuat Tab Dasar
Cukup, tambahkan class .nav-tab ke navigasi dasar untuk menghasilkan navigasi tab, seperti ini:
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Anda juga dapat menambahkan ikon ke item tab agar lebih menarik, seperti yang ditunjukkan di sini:
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">
<i class="fa fa-Beranda"></i> Beranda
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-user"></i> Profil
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-envelope"></i> Pesan
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="fa fa-line-chart"></i> Laporan
</a>
</nav>
Membuat Nav Pills
Demikian pula, Anda dapat membuat navigasi berbasis pil dengan menambahkan class .nav-pills pada navigasi dasar dibanding menggunakan class .nav-tabs, seperti yang ditunjukkan pada contoh berikut:
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<a href="#" class="nav-item nav-link">Pesan</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Demikian pula, seperti tab navigasi, Anda juga dapat menambahkan ikon ke menu pil agar lebih menarik:
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">
<i class="fa fa-Beranda"></i> Beranda
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-user"></i> Profil
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-envelope"></i> Pesan
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="fa fa-line-chart"></i> Laporan
</a>
</nav>
Selain itu, Anda dapat menerapkan class .flex-column pada elemen .nav untuk membuat pil nav tampak ditumpuk secara vertikal, seperti yang ditunjukkan pada contoh berikut:
<nav class="nav nav-pills flex-column">
<a href="#" class="nav-item nav-link active">
<i class="fa fa-Beranda"></i> Beranda
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-user"></i> Profil
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-envelope"></i> Pesan
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="fa fa-line-chart"></i> Laporan
</a>
</nav>
Tab Bootstrap dan Pills Nav dengan Menu Dropdown
Anda dapat menambahkan menu tarik-turun ke tautan di dalam tab dan pil nav dengan sedikit markup tambahan.
Empat class CSS .dropdown, .dropdown-toggle, .dropdown-menu dan .dropdown-item diperlukan selain class .nav, .nav-tabs atau .nav-pills untuk membuat menu dropdown sederhana di dalam nav tanpa menggunakan kode JavaScript apa pun.
Membuat Tab dengan Dropdown
Contoh berikut akan menunjukkan kepada Anda bagaimana menambahkan menu dropdown sederhana ke tab.
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pesan</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>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Membuat Pil dengan Dropdown
Contoh berikut akan menunjukkan kepada Anda bagaimana menambahkan menu dropdown sederhana ke menu pill nav.
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Profil</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pesan</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>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
</nav>
Isi dan Ratakan Komponen Nav
Anda dapat memaksa item navigasi Anda untuk memperpanjang dan secara proporsional mengisi semua lebar yang tersedia menggunakan class .nav-fill pada elemen .nav.
Dalam contoh berikut, semua ruang horizontal ditempati oleh item navigasi, tetapi setiap item navigasi tidak memiliki lebar yang sama.
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-item nav-link">Beranda</a>
<a href="#" class="nav-item nav-link">Tentang</a>
<a href="#" class="nav-item nav-link active">Jelajahi Produk </a>
<a href="#" class="nav-item nav-link">Hubungi Kami</a>
</nav>
Alternatifnya, Anda bisa menggunakan class .nav-justified daripada .nav-fill, jika Anda ingin nav yang memenuhi semua ruang horizontal serta setiap item navigasi memiliki lebar yang sama.
<nav class="nav nav-pills nav-justified">
<a href="#" class="nav-item nav-link">Beranda</a>
<a href="#" class="nav-item nav-link">Tentang</a>
<a href="#" class="nav-item nav-link active">Jelajahi Produk</a>
<a href="#" class="nav-item nav-link">Hubungi Kami</a>
</nav>
Semoga tutorial ini membantu Anda untuk mempelajari cara membuat menu navigasi di Bootstrap.
