Navbar Bootstrap: Bootstrap Tutorial #26

Pada tutorial bootstrap ke 26 ini kita masih akan membahas mengenai salah satu komponen bootstrap yang mirip dengan Komponen Navs yang kita bahas sebelumnya (Navs Bootstrap: Bootstrap Tutorial #25) yaitu Navbar. Pada tutorial kali ini kita akan membahas apa itu navbar, cara menggunakannya, dan variasi dari navbar bootstrap.

Navbar atau navigation bar adalah salah satu dari komponen bootstrap yang berupa sekumpulan menu (berisi link) yang biasanya berada pada bagian atas halaman (jarang terdapat pada bagian bawah halaman). Saya pikir menu navigasi adalah hal yang sangat amat umum disediakan pada website dan komponen ini sangat penting untuk membuat tampilan website lebih ringkas.

Ada beberapa hal yang perlu diketahui sebelum menggunakan navbar bootsrap ini:

Navbar memerlukan sebuah komponen lain sebagai wadah dengan class .navbar diikuti class .navbar-expand{-sm|-md|-lg|-xl} untuk membuat navbar yang responsif
Navbar dan komponennya dapat kita sesuaikan dengan catatan komponen yang diberi class .navbar harus dapat membatasi lebar horizontalnya (contoh menggunakan tag div)
Kita dapat mengontrol spasi dan perataan dari komponen navbar ini dengan utilitas dari bootstrap yaitu spacing untuk mengatur spasi dan flex untuk mengatur perataannya
Komponen navbar secara default sudah responsif (bisa menyesuaikan ukuran layar) tetapi kita dapat juga memodifikasinya. Responsif atau tidak nya navbar juga tergantung digunakan atau tidak plugin Javascript (library bootstrap.js).

Langsung saja kita menuju pembahasan:

Section Artikel

1 Dasar Navbar
2 Vertikal Navbar
3 Navbar berwarna dan berada ditengah
4 Navbar logo
5 Collapsing Navbar
6 Navbar dengan dropdown, form dan buttons
7 Navbar text
8 Navbar tetap dibagian atas atau bawah
9 Sticky Navbar

Dasar Navbar

Seperti yang saya jelaskan sebelumnya navbar dibuat dengan memasukkan class .navbar pada tag <nav>. Dengan diikuti class untuk membuat navbar responsif yaitu .navbar-expand-xl | lg | md | sm menentukan kapan Navbar harus mengarah secara vertikal (xl = pada layar ekstra besar, lg = besar, md = sedang atau sm = kecil).

Untuk menambahkan link didalam navbar gunakan elemen <ul> dengan class .navbar nav. Kemudian pada element <li> gunakan class .nav-item dengan diikuti tag <a> dengan menggunakan class .nav-link.

Lebih jelasnya lihat contoh program dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">
  <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>
<br>

<div class="container-fluid">
  <h3>Contoh Navbar dasar</h3>
  <p>Kelas navbar-expand-xl | lg | md | sm menentukan kapan bilah navigasi harus menumpuk secara vertikal (pada layar ekstra besar, besar, sedang atau kecil).</p>
</div>

</body>
</html>

Vertikal Navbar

Untuk membuat menu navigasi secara vertikal maka cukup menghilangkan class .navbar-expand-xl | lg | md | sm . Pada contoh dibawah saya menggunakan class tambahan yaitu .bg-light agar menu navigasi memiliki warna background.

contoh programnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar bg-light">
  <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>
<br>

<div class="container-fluid">
  <h3>Contoh Navbar dasar</h3>
  <p>Kelas navbar-expand-xl | lg | md | sm menentukan kapan bilah navigasi harus menumpuk secara vertikal (pada layar ekstra besar, besar, sedang atau kecil).</p>
</div>

</body>
</html>

Navbar berwarna dan berada ditengah

Maksud dari Navbar berwarna adalah menu navigasi yang memiliki background warna dibelakangnya. Untuk membuat nya cukup menambahkan class .bg-warna setelah class .navbar. Contoh class bg-warna

bg-light = background navbar berwarna putih
bg-dark = background navbar berwarna hitam
bg-primary = background navbar berwarna biru muda
bg-success = background navbar berwarna hijau
bg-info = background navbar berwarna biru tua
bg-warning = background navbar berwarna kuning
bg-danger = background navbar berwarna merah
bg-secondary = background navbar berwarna silver kehitaman

Note: karena kadang-kadang teks tidak terlihat karena navbar menggunakan warna background maka kita juga harus merubah warna teks nya dengan menambahkan class .navbar-light untuk teks berwarna hitam dan class .navbar-dark untuk teks berwarna putih.

Sedangkan untuk membuat navbar berada ditengah halaman kita menambahkan class .justify-content-center

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Colored Navbar</h3>
  <p>Use any of the .bg-color classes to add a background color to the navbar.</p>
  <p>Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.</p>
</div>

<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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <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>

<div class="container-fluid">
  <h3>Navbar ditengah</h3>
  <p>gunakan class .justify-content-center membuat navigasi ditengah halaman.</p>
</div>

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <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>
<br>

</body>
</html>

Kita juga dapat mengatur status link pada navbar yaitu dengan menggunakan class .active atau class .disabled pada elemen <a>. Class .active akan menyorot elementnya dan class .disabled akan membuat element tidak dapat di klik.

Navbar logo

Gunakan class .navbar-brand untuk menambahkn logo atau nama webste pada navbar. Jika class ini memuat gambar (tag <img> ) maka gambar akan secara otomatis menyesuaikan navbar secara vertikal.

contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">
    <img src="https://dosenit.com/wp-content/uploads/2020/11/atom-logo.png" alt="logo" style="width:40px;">
  </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>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="container-fluid">
  <h3>Brand / Logo</h3>
  <p>KETIKA MENGGUNAKAN GAMBAR PADA BRAND NAVBAR MAKA BOOTSTRAP AKAN SECARA OTOMATIS MENYESUAIKAN NYA</p>
</div>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <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>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="container-fluid">
  <h3>Brand / Logo</h3>
  <p>class .navbar-brand untuk menambahkan logo atau gambar.</p>
</div>

</body>
</html>

Collapsing Navbar

Maksud nya adalah ketika menggunakan layar yang kecil maka kita seringkali ingin agar menu navigasi tersembunyi pada suatu tombol dan jika tombol tersebut diklik maka akan memunculkan menu navigasi nya.

Untuk membuat navbar yang bisa diciutkan, gunakan tombol dengan class .navbar-toggler, atribut data-toggle = "collapse" dan atribute data-target = "#idtarget". Kemudian masukkan konten/isi navbar (tautan, dll) di dalam elemen div dengan class .collapse navbar-collapse, diikuti dengan id yang cocok dengan data-target dari tombol.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <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>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>Perkecil layar tampilan pada jendela browsermu</p>
</div>

</body>
</html>

Navbar dengan dropdown, form dan buttons

Navbar dengan dropdown dibuat dengan menambahkan class .dropdown pada item navbar. Gunakan class .dropdown-toggle pada link item navbar untuk membuka menu dropdownnya sedangkan untuk menu dan item pada dropdown menggunakan class .dropdown-menu dan class .dropdown-item.

Untuk membuat navbar dengan form dan button kita tinggal menambahkan elemen <form> dengan class .form-inline, fungsi class ini adalah untuk menempat kan button form disamping secara horizontal. Selain itu ada cara lainnya yaitu dengan menambahakan class .input-group-prepend atau .input-group-append untuk menambahkan ikon atau teks bantuan disamping form.

contoh program nya adalah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Navbar Dengan Dropdown</h3>
</div>
<div class="conatainer"> 
<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>
</div>
<br>
 <!--navbar dengan form -->
<div class="container">
<h3>Navbar Forms</h3>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  		<form class="form-inline" action="#">
   			<input class="form-control mr-sm-2" type="text" placeholder="Search">
    		<button class="btn btn-success" type="submit">Search</button>
  		</form>
  </nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline">
    <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>
</div>

</body>
</html>

Navbar text

Navbar Text disini yang dimaksud adalah mengatur adanya item atau komponen lain selain link (Seperti teks atau yang lainnya). Nah kita harus menggunakan class .navbar-text untuk dapat meratakan secara vertikal komponen tersebut dalam navbar.

contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<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">
    Teks ini bukan link
  </span>
</nav>
<br>

<div class="container">
  <h3>Navbar Text</h3>
  <p>Gunakan kelas .navbar-text untuk meratakan secara vertikal setiap elemen di dalam navbar yang bukan merupakan tautan.</p>
</div>

</body>
</html>

Navbar tetap dibagian atas atau bawah

Navbar pada bootstrap juga dapat dibuat “tetap”, yang dimaksud tetap disini adalah meskipun halaman di scroll maka navbar akan tetap terlihat. Ada dua jenis yaitu navbar tetap di atas dan bawah. Untuk membuat Navbar tetap diatas maka kita akan menambahkan class .fixed-top setelah class untuk membuat navbar, sedangkan untuk membuat navbar tetap dibagian bawah halaman web kita menggunakan class .fixed-bottom.

Contoh program nya adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid" style="margin-top:80px">
  <h3>Navbar Tetap dibagian atas</h3>
  <p>Menu navigasi akan tetap terlihat dalam posisi tetap (diatas atau bawah) meskipun halaman di gulirkan</p>
  <h1>Scroll halaman untuk melihat efek</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <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>
  </ul>
</nav>

<div class="container-fluid"><br>
  <h3>Navbar Tetap dibagian bawah</h3>
  <p>Menu navigasi akan tetap terlihat dalam posisi tetap (diatas atau bawah) meskipun halaman di gulirkan</p>
  <h1>Scroll halaman untuk melihat efek</h1>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
  </ul>
</nav>
</body>
</html>

Sticky Navbar

Yang terakhir ini adalah jenis navbar yang ketika kita menggulirkan halaman keatas maka navbar akan berpindah kebawah begitu juga sebaliknya ketika kita menggulirkan halaman web kebawah maka navbar akan pindah ke atas.

Untuk membuat sticky navbar kita hanya perlu menambahkan class .sticky-top untuk membuat navbar tetap berada diatas saat kita menggulirkan kebawah.

Note: class ini tidak bekerja untuk browser Internet Explorer 11 dan hanya akan menyebabkan posisinya menjadi relative.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<div class="container-fluid">
  <br>
  <h3>Sticky Navbar</h3>
  <p>Navbar tetap berada di bagian atas halaman saat kita melakukan scroll.</p>
  <p>Scroll untuk melihat efeknya</p>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" href="#">Logo</a>
  <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>
  </ul>
</nav>

<div class="container-fluid"><br>
  <p>Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks.</p>
  <p>Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks.</p>
  <p>Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks.</p>
  <p>Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks. Beberapa contoh teks.</p>
</div>

</body>
</html>

Untuk demo sticky Navbar yang lebih jelas di DEMO STICKY NAVBAR

Sekian penjelasan mengenai komponen Navbar dari bootstrap. semoga dapat dimanfaatkan dengan baik. Terima kasih