Melanjutkan tutorial saya yang kemarin tentang breadcrumb sekarang saya akan membuat tutorial yang gak beda jauh dengan breadcrumb yaitu membuat navbar pada website dengan menggunakan bootstarp 4.
Seperti namanya navbar berfungsi sebagai navigasi bar, tempat menyimpan menu dalam sebuah website. Cara membuat navbar dengan bootstrap 4 adalah dengan menggunakan tag html "nav".
Baca Juga : Membuat breadcrumb dengan bootstrap 4
<nav class="navbar navbar-dark bg-dark">
//isi dari navbar
</nav>Kode html di atas adalah contoh sederhana dari navbar light dengan bacground warna dark. Untuk mengganti bacground pada navbar kamu dapat mengganti "bg-dark" dengan bg{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Sedangkan tema dari warna navbar kamu dapat mengganti "navbar-dark" dengan navbar{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Untuk expand navbar kamu dapat menambahkan class navbar-expand{-sm|-md|-lg|-xl}.
Sekarang saya akan tambahkan gambar, link, dan tulisan untuk nemampilakn judul pada navbar dengan cara memasukan kode html di bawah ini pada html tag nav.
<a class="navbar-brand" href="https://www.rumahcode.org/">
<img src="https://www.rumahcode.org/img/logo.png" width="120" height="30" class="d-inline-block align-top" alt="Rumah Code">
[RumahCode.ORG]
</a>Untuk membuat navbar menjadi responsive dan dapat memunculkan menu ketika browser dikecilkan ukuran nya kita membutuhkan button toggler dengan menambahkan kode html di bawah ini setelah kode di atas
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>Sekarang kita buat menu pada navbar dengan menggunakan tag ul,li
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.rumahcode.org/20/Bootstrap-4--04.1-Component">Bootstrap 4 - 04.1: Component</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.rumahcode.org/26/Bootstrap-4--04.2-Image-Slide">Bootstrap 4 - 04.2: Image Slide</a>
</li>
</ul>
</div>sehingga kode html membuat navbar dan menu nya kan menjadi seperti ini
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="https://www.rumahcode.org/">
<img src="https://www.rumahcode.org/img/logo.png" width="120" height="30" class="d-inline-block align-top" alt="Rumah Code">
[RumahCode.ORG]
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.rumahcode.org/20/Bootstrap-4--04.1-Component">Bootstrap 4 - 04.1: Component</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.rumahcode.org/26/Bootstrap-4--04.2-Image-Slide">Bootstrap 4 - 04.2: Image Slide</a>
</li>
</ul>
</div>
</nav>contoh kode html di atas adalah contoh untuk membuat navbar sederhana. Bagaimana caranya membuat menu dropdown pada navbar? cara membuat menu dropdown dengan bootstrap 4 adalah memambahkan kode html di bawah ini
<!-- cara membuat menu dropdown di html -->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.rumahcode.org/19/Bootstrap-4--03.1-Content">Bootstrap 4 - 03.1: Content</a>
<a class="dropdown-item" href="https://www.rumahcode.org/18/Bootstrap-4--02.3-Layout-pada-Bootstrap-4">Bootstrap 4 - 02.3: Layout pada Bootstrap 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.rumahcode.org/15/Bootstrap-4--01-Dasar-Bootstrap-4">Tutorial Dasar Bootstrap 4</a>
</div>sehingga menjadi seperti ini
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="https://www.rumahcode.org/">
<img src="https://www.rumahcode.org/img/logo.png" width="120" height="30" class="d-inline-block align-top" alt="Rumah Code">
[RumahCode.ORG]
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.rumahcode.org/20/Bootstrap-4--04.1-Component">Bootstrap 4 - 04.1: Component</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.rumahcode.org/26/Bootstrap-4--04.2-Image-Slide">Bootstrap 4 - 04.2: Image Slide</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootstrap
</a>
<!-- cara membuat menu dropdown di html -->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.rumahcode.org/19/Bootstrap-4--03.1-Content">Bootstrap 4 - 03.1: Content</a>
<a class="dropdown-item" href="https://www.rumahcode.org/18/Bootstrap-4--02.3-Layout-pada-Bootstrap-4">Bootstrap 4 - 02.3: Layout pada Bootstrap 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.rumahcode.org/15/Bootstrap-4--01-Dasar-Bootstrap-4">Tutorial Dasar Bootstrap 4</a>
</div>
</li>
</ul>
</div>
</nav>Jika kamu masih bingung dengan cara membuat navbar, menu, atau membuat sub menu dropdown dengan menggunakan bootstrap 4 kamu dapat melihat demo dan mengoprek nya sehingga kamu dapat mengerti bagaimana caranya membuat navbar dengan menu dropdwon sederhana
