Jeje 9:58 AM Belajar, Developer, Programmer, Tips 25 comments

Tutorial Membuat Navbar dengan Bootstrap 4

Navbar adalah elemen penting dari suatu website atau sebuah aplikasi. Navbar sangat berfungsi untuk membuat user atau pengguna menjadi lebih nyaman. Tanpa adanya navbar yang jelas, kemungkinan besar user atau calon user pun akan kebingungan untuk menjelajahi lebih jauh, baik itu suatu website atau aplikasi. Untuk itulah, disini kita akan membahas bagiamana sih cara membuat navbar menggunakan Bootstrap 4?

Mengapa harus belajar menggunakan Bootstrap ?

Hal utama untuk menjawab soal ini adalah, karena bootstrap sangat mudah untuk di gunakan. Apalagi bagi kamu yang tidak memahami mengenai sebuah kode - kode atau yang baru belajar mengenai programming.

Bootstrap memberikan fasilitas dan edukasi yang cocok bagi mereka yang ingin terjun ke dalam pembelajaran programming. Apalagi untuk kamu yang ingin memiliki sebuah website sendiri. Tentu, bootstrap dapat membantu kamu dalam membuat website impianmu.

Kita kembali ke permasalah awal kita yaitu cara membuat Navbar dengan menggunakan Bootstrap.

Ini adalah kode awal yang di gunakan bila menggunakan Bootstrap 4 ;

<!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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Dan ini adalah halaman yang terbuat dari hasil kode tersebut;

Perlu diingat, kamu pastikan memasukan kode JS serta CSS nya yang ini;

Ini JS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Ini CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Navbar

Selanjutnya, mari kita buat terlebih dahulu Navbar nya. Disini akan ada 2 contoh kode, yang pertama adalah Nav link, sedangkan yang kedua adalah Nav heading.

Ini adalah kode untuk Nav link

 <!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

Ini adalah kode untuk Nav heading

 <!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Dari kedua kode tersebut, kamu akan melihat sebuah perbedaan. Ya, dimana di salah satu kode tersebut terdapat sebuah link, artinya bila dilakukan klik terhadap navbar tersebut, tentu akan mengarah ke alamat url yang terdapat di navbar. Sedangkan, untuk navbar heading, ia hanya berfungsi sebagai head saja, artinya bila di klik ia tidak akan mersepon apapun.

Nav Logo

Dalam membuat navigasi yang ingin menggunakan gambar atau logo, kamu bisa menggunakan kode berikut ini. Disini akan ada 2 jenis kode yang bisa kamu gunakan. Pertama adalah gambar saja, kemudian yang kedua adalah gambar di tambah text.

Ini adalah kode yang kamu gunakan hanya untuk gambar saja:

 <!-- Hanya Gambar -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="url gambar kamu" width="30" height="30" alt="" loading="lazy">
  </a>
</nav>

Ini adalah kode yang bisa kamu gunakan untuk menampilkan gambar dan tulisan di Navbar

 <!-- Gambar dan Teks -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="url gambar kamu" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
    Bootstrap
  </a>
</nav>

Untuk dapat mempelajarinya, bila kamu ingin menambahkan gambar pada Navbar menggunakan Bootsrap, kamu cukup mengingat menambahkan "class navbar-brand"

Navigasi Link Menu

Navigasi menu biasanya selalu menyamping atau horizontal. Ini berfungsi untuk membuat tampilan web menjadi lebih luas dan navigasi yang nyaman dilihat. Dalam membuat navigasi link dalam web, kamu tentu perlu menambahkan atau mngedit beberapa kode yang ada, terlebih lagi bila kamu menggunakan Bootstrap.

Dalam kode sebelumnya, kamu sudah membuat Navbar bukan, kemudian, bila ingin menambahkan beberapa menu ke dalam Navbar, kamu bisa tambahkan kode ini di kode pembukaan navbar : navbar-expand-lg

Sebelum di tambahkan :

 <nav class="navbar navbar-light bg-light">

Setelah di tambahkan navbar-expand-lg

 <nav class="navbar navbar-expand-lg navbar-light bg-light">

Setelah kamu menambahkan kode tersebut, langkah selanjutnya yang kamu harus lakukan adalah menuliskan kode untuk membuat sebuah navbar toggler. Ini sangat berfungsi untuk membuat Navbar kamu menjadi responsif.

Kamu bisa tambahkan kodenya :

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

Tambahkan kode itu setelah kode Nav logo atau brand. Kemudian mari kita mulai membuat beberapa menu yang akan di tampilkan di Navbar. Sebelum membuat menu - menu lainnya, kamu harus menambahkan :

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
     ......
    </ul>
</div>

Dengan menggunakan kode ini, kamu akan mudah untuk mengedit beberapa menu yang ada di Navbar nantinya.

Selanjutnya membuat menu lainnya, kamu bisa menggunakan kode ini :

 <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="#">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu 2</a>
      </li>

Kamu bisa mengubah link tujuan yang bertanda # dengan link yang kamu inginkan. Kemudian kamu juga bisa merubah nama menu seperti Menu 1 dan Menu 2 dengan mudah.

Seandainya kamu ingin menggunakan dropdown menu, tentu bisa saja dengan menggunakan kode ini :

 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Sub menu 1</a>
          <a class="dropdown-item" href="#">Sub menu 2</a>
          <a class="dropdown-item" href="#">Sub menu 3</a>
        </div>
      </li>

Jadi, keseluruhan kode pada Navigasi Link Menu menjadi seperti ini :

Form Pencarian

Setelah kamu sudah membuat heading, kemudian menu - menu lainnya di Navbar, selanjutnya kamu bisa membuat menu atau form untuk pencarian. Biasanya form kecil ini berada di pojok dari sebuah website.

Untuk membuatnya, kamu cukup perlu menambahkan kode ini setelah kode dari menu </ul>, ini adalah kodenya :

 <form class="form-inline">
    <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>

Setelah menambahkan kode tersebut, tentunya Navbar yang kamu buat sudah mulai sempurna. Kamu sudah membuat brand atau logo, kemudian sudah menambahkan beberapa menu - menu serta terakhir menambahkan form pencarian kecil di Navbar.

Sampai disini, kamu tentu sudah melihat hasilnya bukan?. Horee, kamu sudah berhasil membuat navbar dengan menggunakan Bootstrap. Untuk melihat beberapa kode mulai dari awal hingga akhir, kamu bisa melihat kembali live demo dari atas hingga akhir. Disana ada beberapa kode serta pemenggalannya, sehingga tidak membuat kamu pusing.

Tunggu artikel selanjutnya, masih mengenai pembahasan Bootstrap 4. Semoga dengan adanya tips dan penjelasannya ini, kamu akan mudah untuk belajar Bootstrap serta dapat membangun website sendiri dengan bantuan Bootstrap.

25 comments

RubyOctober 11, 2020 at 9:30 PM
Rajinnya buat tutorial pengaturcaraan. Okay untuk Navigasi bar dan semua berada di atas itu amat penting untuk memudahkan pembaca. Kebiasaanya Home, About dan Contact, Search dan MedSos berada di atas. Tapi depend kepada owner web / blog utk paparkan yang mana satu merekan inginkan. Semua itu boleh di selenggara jika tahu caranya. Baca blog ini lah kan. Hehe. Teruskan menulis ya. Well done! All the best!
Rawlins GLAMOctober 11, 2020 at 11:20 PM
Bagusnya sharing pasal coding sebegini. Rawlins tak pandai la nak buat code-code nie. Selalu download templat yang ready-made je. Thanks for sharing
LampuHijauOctober 12, 2020 at 12:23 AM
LH tak pernah faham dengan code-code programming ni. Ambil yang dah sedia ada aje. Memang pening lah. Nice sharing though
Sis LinOctober 12, 2020 at 12:44 AM
Mudah aje kalau siapa yang pandai adjust edit codingnya tu..kalau jenis tak tau guna html tu, mau juling mata.. nanti nak cuba juga kalau nak tambah navbar baru nanti..
QeelaOctober 12, 2020 at 2:56 AM
Bestnyaa bila tahu dan mahir selok-belok coding dan programming macam ni, thanks for sharing tutorial terperinci macam ni yea! Boleh jadi as rujukan nanti 👍🏻
Cik MinOctober 12, 2020 at 3:12 AM
Bagus la artikel awak sebab selalu bagi informasi yang berguna kepada para pembaca. Keep it up
Fadima MooneiraOctober 12, 2020 at 6:14 AM
This is a very useful information. It’s important for us content creators to know. Thank you for sharing this knowledge with me.
Fadzil AhmadOctober 12, 2020 at 5:35 PM
Good information sharing. Budak2 programmer atau baru nak belajar, mesti cari dkt google info mcm ni kan. Sy dh lama tinggalkan, tapi tengok coding tu faham la sikit2
Kitkat NelfeiOctober 12, 2020 at 7:03 PM
Oh mai... Lama giler tak sentuh part coding... Dah return balik knowledge kat lecturer! Hahaha.. Interesting article to make our blog useful kan.. Byk lagi yang Kitkat kena explore about dunia blogger ni.. Ye la skrg macam baby blogger baru lahir in 2020..hehe...
Marina BashahOctober 12, 2020 at 7:45 PM
Lama dah tak buat coding-coding ni. Sekarang macam complicated sangat dah codingnye. Hehe
Puan BOctober 12, 2020 at 8:11 PM
Ilmu,skil dan kepintaran yang bagus sekali Tuhan kurnia pada
mereka yg kepakaran dlm hal ini. Bukan mudah mau fahami dunia coding bagi saya. Madam memang 'failed' when it comes to this. Maybe dats why i start blogging with Blogspot. Drag n drop. Tak bisa fikir lebih ttg teknikalnya. Above all, good job 2u!
UmmiOctober 12, 2020 at 11:30 PM
Fuh, sangat advanced ni. Saya masih lagi merangkak nak guna Wordpress dan Elementor.
nikkhazamiOctober 13, 2020 at 6:57 AM
lamanya dan edit coding coding ni. mungkin kena star banlik supaya blog lebih laju. tq di atas perkongsiannya
Cik Puan EnaOctober 13, 2020 at 7:57 AM
Wahh hebat ni pndai guna koding. Blog pon kalau boleh guna widget sedia ada je. Mmg xpandai nak explore koding ni. At least boleh refer cn kalau rasa nk belajar koding.
Mawardi YunusOctober 13, 2020 at 5:58 PM
satu perkongsian yang bagus. kita tak pandai sangat pasal2 coding ni. simple2 boleh la. tq for sharing.
Sunshine KellyOctober 13, 2020 at 8:19 PM
Wow thanks for the info. I m not good at all these coding work, usually i write and post jer, need to learn.
Zaza AzmanOctober 14, 2020 at 11:34 AM
mudah fahami utk orang yang tak paham aturcara coding.. thanks sharing this info ya...
TengkubutangOctober 15, 2020 at 4:14 AM
TB pun tak berapa faham sangat coding2 ni.. Dulu edit blog sendiri sampai migrain jadinya bila error.. Hahaha