Cara Membuat Navbar di Bootstrap 4

Navbar atau Navigation Bar adalah Navigasi Header yang biasanya berda di bagian atas halaman Web. Berikut adalah contoh tampilannya:

Navbar



Membuat Navbar di Bootstrap 4

Dengan menggunakan Bootstrap, Navbar dapat diperpanjang atau dapat menjadi Collapse tergantung pada ukuran layar.

Navbar standar dapat dibuat dengan menggunakan class .navbar diikuti dengan class Collapse yang responsif yaitu .navbar-expand-xl/lg/md/sm (Navbar yang menumpuk secara vertikal pada layar xl/Extra Large, lg/Large, md/Medium atau sm/Small).

Untuk menambahkan link ke dalam navbar, kita dapat menggunakan elemen <ul> dengan class="navbar-nav". Kemudian, tambahkan elemen <li> dengan class .nav-item diikuti dengan elemen <a> dengan class .nav-link. Contoh:

Navbar Link

<!-- Navbar Horizontal yang akan menjadi Vertikal pada layar berukuran kecil -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav> 

Lihat kode di Github | Lihat Live Demo

Membuat Navbar Vertikal di Bootstrap 4

Untuk membuat Navbar menjadi Vertikal, kita dapat menghapus class .navbar-expand-xl/lg/md/sm. Contoh:

Membuat Navbar Vertikal di Bootstrap 4

<!-- Navbar Vertical -->
<nav class="navbar bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav> 

Lihat kode di Github | Lihat Live Demo

Membuat Navbar Rata Tengah di Bootstrap 4

Untuk membuat Navbar menjadi rata tengah, kita dapat menambahkan class .justify-content-center.

Berikut adalah contoh untuk membuat Navbar menjadi rata tengah pada layar sedang, besar dan ekstra besar. Pada layar kecil, Navbar tersebut tetap akan ditampilkan secara vertikal dan rata kiri (karena class .navbar-expand-sm). Contoh:

Membuat Navbar Rata Tengah di Bootstrap 4

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

Mengatur Warna Navbar di Bootstrap 4

Kita dapat menggunakan salah satu class .bg-color untuk mengubah warna Background pada Navbar seperti .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, dan .bg-light.

Tips: Tambahkan teks berwarna putih pada semua Link pada Navbar dengan menggunakan class .navbar-dark atau .navbar-light untuk membuat warna teks menjadi hitam.

Mengatur Warna Navbar di Bootstrap 4

<!-- Abu-Abu dengan Teks Hitam -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" 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="#">Disabled</a>
    </li>
  </ul>
</nav>

<!-- Hitam dengan Teks Putih -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Biru dengan Teks Putih -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Lihat kode di Github | Lihat Live Demo

Catatan: Untuk membuat Toggle, kita dapat menambahkan class .active ke dalam elemen <a> untuk meng-Higlight Link yang sedang dibuka atau class .disabled yang dapat menunjukkan bahwa link tersebut tidak dapat diklik.

Menambahkan Logo pada Navbar di Bootstrap 4

Class .navbar-brand dapat digunakan untuk membuat Logo pada Navbar. Contoh:

Menambahkan Logo pada Navbar di Bootstrap 4

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

Saat menggunakan class .navbar-brand pada gambar, Bootstrap 4 akan secara otomatis mengatur gambar agar sesuai dengan Navbar secara vertikal. Contoh:

Navbar Brand

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
    <img src="https://3.bp.blogspot.com/-p1S-XTovby8/XhWCUZkK4uI/AAAAAAAAImw/RMeypcOCk_MMMeOrnDfkc4WN0qhU8iiHgCK4BGAYYCw/s1600/index.png" alt="Logo" style="width:40px;">
  </a>
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

Membuat Navbar Collapse pada Bootstrap 4

Terutama pada layar kecil, mungkin kalian perlu menyembunyikan Link navigasi dan mengubahnya dengan tombol yang akan dapat menampilkannya ketika diklik.

Untuk membuat Navbar Collapse, kita dapat menggunakan elemen <button> dengan class="navbar-toggler", atribut data-toggle="collapse" dan data-target="#ID-TARGET". Kemudian kelilingi konten dari Navbar (Link, dll) di dalam elemen <div> dengan class="collapse navbar-collapse", diikuti dengan ID yang cocok dengan data-target dari tombol: "ID-TARGET". Contoh:

Membuat Navbar Collapse pada Bootstrap 4

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-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>
    </ul>
  </div>
</nav> 

Lihat kode di Github | Lihat Live Demo

Membuat Navbar dengan Dropdown di Bootstrap 4

Navbar juga dapat terdiri dari Dropdown Menu. Berikut adalah contohnya:

Membuat Navbar dengan Dropdown di Bootstrap 4

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </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>
  </ul>
</nav> 

Lihat kode di Github | Lihat Live Demo

Menambahkan Form dan Tombol pada Navbar di Bootstrap 4

Kita juga dapat menambahkan elemen <form> dengan class="form-inline" ke dalam group input dan tombol yang bersampingan. Contoh:

Menambahkan Form dan Tombol pada Navbar di Bootstrap 4

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav> 

Lihat kode di Github | Lihat Live Demo

Kita juga dapat menggunakan class input lainnya seperti .input-group-prepend atau .input-group-append untuk melampirkan ikon atau teks di sebelah input. Kita akan belajar lebih banyak tentang class tersebut pada bagian yang akan datang:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav> 

Menambahkan Teks pada Navbar

Kita dapat menggunakan class .navbar-teks untuk menambahakan elemen apa pun ke dalam Navbar yang bukan Link (Untuk memastikan padding dan warna teks menjadi tepat). Contoh:

Menambahkan Teks pada Navbar

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>

</nav> 

Lihat kode di Github | Lihat Live Demo

Mengatur Navbar menjadi Fixed

Navbar juga dapat diubah menjadi Fixed tepat di bagian atas atau di bagian bawah halaman.

Dengan mengaturnya, Navbar akan tetap terlihat dalam posisi tetap (atas atau bawah) walaupun kita telah Scroll ke bawah/atas halaman.

Untuk mengatur Navbar menjadi Fixed (Tetap di atas), kita dapat menggunakan class .fixed-top:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

Untuk membuat Navbar menjadi Fixed di bagian bawah halaman, kita dapat menggunakan class .fixed-bottom:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

Untuk membuat Navbar Fixed/tetap di bagian atas halaman saat kita men-Scroll halaman, kita dapat menggunakan class .sticky-top.

Catatan: Kelas tersebut tidak berfungsi pada Internet Explorer 11 kebawah.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav> 

Lihat kode di Github | Lihat Live Demo

0 Komentar