Cara menggunakan navbar bootstrap keren

Karena kita cukup mengcopy dan paste code yang sudah disiapkan, jadi kita tidak perlu membuat dari awal..

Table of Contents Show

Cara penggunaan Navbar
Apa itu navbar pada bootstrap?
Apa fungsi Navigation Bar?
Apa itu nav link?
Manakah Class pada bootstrap yang digunakan untuk membuat navigasi tetap berada di atas?

Apasih kelebihannya kalau kita pakai Framework Bootstrap ini ??

Kelebihannya itu Navbar kita sudah responsive layout. Maksudnya ?

Artinya Navbar ini akan secara automatis akan melakukan perubahaan pada tampilannya. Nanti akan kita bahas dehh yaa.. Simak selanjut nyaa…

Untuk menggunakan nya, tentu kita harus ke website nya bootstrap terlebih dahulu ya…

Setelah itu gimana ??? Coba lihat gambar dibawah ini

Jika sudah sesuai dengan gambar diatas ini, bisa kita ke component dan terus cari Navbar.

Setelah ketemu Navbar, langsung klik dan pasti akan masuk ke halaman Navbar nya seperti ini

Nah ini adalah tampilan dari halaman navbar nya. Setelah itu scroll aja kebawah pasti akan ketemu code yang pertama dan Panjang.

Nah itu adalah code untuk kita membuat navbar.

Kita tinggal copy paste saja ya code yang ada diwebsite nya. Dan sudah jadilah navbar kita dengan Bootstrap 5. Simple kan….

Letaknya kebanyakan selalu paling atas, isinya menu yang memberikan informasi tertentu kepada pengunjung website.

Maka dari itu, pada postingan kali ini kita akan pelajari langsung.

Kita bisa buatkan file HTML.

Lalu kita masukkan script pendukung Bootstrap pada file HTML tersebut.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Membuat Navbar</title>
  </head>
  <body>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Untuk langkahnya sebenarnya bisa dipelajari pada (https://getbootstrap.com/docs/4.3/components/navbar/), khusus Navbar.

Lalu kita scroll ke bawah setelah buka alamat web Bootstrap tadi, maka akan keluar tampilan berikut ini.

Nah, untuk mendapatkan Navbar seperti gambar di atas.

Di bawah contohnya, terdapat script kodenya.

Script kodenya bisa diambil dengan mengklik tombol copy pada gambar di bawah ini.

Lalu paste pada project yang kita buat. Paste pada tag.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</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">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Nah, untuk kontennya bisa diubah berdasarkan kebutuhan kita.

Maka beginilah script kode keseluruhan.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Membuat Navbar</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</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">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Dan beginilah hasilnya pada browser.

Ganti Warna Tema

Jika kita perhatikan di atas, navbarnya menggunakan class CSS “.navbar-light”.

Itu berarti kita akan memerikan warna teks pada menu navbarnya jadi berwarna hitam.

Jika pengen teksnya putih, maka kita menggunakan clas CSS “.navbar-dark”.

Disitu ada tambahan juga setelahnya, yaitu class “.bg-light”.

Artinya warna backgroundnya menjadi warna abu-abu cahaya gitu, tampak jelas pada gambar di atas.

Untuk ganti backroundnya, Bootstrap sudah menyediakan class CSSnya.

Class tersebut bisa dikunjungi disini (https://getbootstrap.com/docs/4.3/utilities/colors/#background-color).

Navbar adalah singkatan dari navigation bar. merupakan komponen website yang berupa menu. yang biasanya diletakkan pada header website. Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website. bisa kita sebut sebagai menu utama dari sebuah website.

Navbar atau navigasi bar merupakan salah satu elemen pada HTML yang dibuat untuk mempresentasikan link navigasi. Biasanya navbar digunakan sebagai menu yang berisi link-link dan bersifat umum pada suatu website, seperti Home, About, Contact Us, dan lain sebagainya.

Apa itu nav link?

Nav atau navs adalah singkatan dari navigation. nav merupakan komponen yang disediakan oleh bootstrap untuk membuat navigasi pada website. Navigasi yang dimaksud adalah sebuah komponen yang biasanya terdiri dari beberapa link atau hyperlink yang berbentuk seperti menu.

Manakah Class pada bootstrap yang digunakan untuk membuat navigasi tetap berada di atas?

Didalam Bootstrap untuk menggunakan standar navigasi bar kita gunakan class . navbar, lalu bisa kita ikutkan dengan fitur responsive collaps dengan beberapa ukuran standar yang diberikan seperti extra large, large, medium atau small.