Home / Bootstrap / Tutorial Bootstrap Bagian 8: Membuat Navigation Bar/ Navbar dan Dropdown Menu Dengan Bootstrap

Tutorial Bootstrap Bagian 8: Membuat Navigation Bar/ Navbar dan Dropdown Menu Dengan Bootstrap

Tutorial bootstrap kali ini kita akan membahas mengenai Navigation Bar(Navbar) dan Dropdown Menu dengan bootstrap. Dropdown Menu berada di dalam navbar. Navbar umumnya berada di bagian atas sebuah website dan pada navbar inilah ditampilkan menu utama sebuah website. Jika sebuah website memiliki banyak menu, maka dropdown menu adalah solusi untuk menata menu-menu tersebut berdasarkan kelompok ataupun kategori.

Bootstrap sudah menyediakan class untuk navbar dan dropdown menu, sehingga kita dapat dengan mudah membuat navbar dan dropdown menu yang responsif. Class navbar pada bootstrap ada dua jenis yaitu:

  • navbar-default
    Digunakan untuk membuat navbar berwarna default(putih)
  • navbar-inverse
    Digunakan untuk membuat navbar berwarna hitam

Kedua class navbar tersebut dapat kita panggil setelah memberikan class navbar. Penggunaan class navbar sedikit berbeda dengan penggunaan class yang pernah kita bahas sebelumnya. Kalau penggunaan class tabel pada tutorial Membuat Tabel dengan Bootstrap, Mengatur tampilan Gambar dengan Bootstrap, Membuat Layout halaman Website dan lain sebagainya, class-clasn bootstrap selalu berada dalam tag <div>.

Beda halnya dengan Navbar, class navbar berada diluar class container ataupun bisa di katakan class container berada dalam class navbar. Class navbar memiliki posisi bagian terluar dari sebuah halaman website.  

Untuk lebih jelasnya, perhatikan contoh berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Navbar Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
        <nav class="navbar navbar-default">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle Nav</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">ITGeek</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Vb.Net</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">JAVA</a></li>
                <li><a href="#">C#</a></li>
                <li><a href="#">MariaDB</a></li>
                <li><a href="#">SQL Server</a></li>
                <li><a href="#">Oracle</a></li>
              </ul>
            </div>
          </div>
        </nav>    
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Seperti biasa 🙂 , baris 5 untuk memanggil file css bootstrap. Baris 34 dan 35 untuk menyertakan JQuery dan file javascript bootstrap.
  • Untuk membuat navbar dimulai dari baris 8 sampai dengan 33. Pada baris 8 kita mulai class navbar dengan <nav class=”navbar navbar-default”>. Jenis navbar yang kita gunakan adalah navbar-default atau berbwarna putih.
  • Baris ke 9, kita membuat sebuah class container untuk menyediakan tempat list menu pada navbar. Jika kita hanya menggunakan <container> saja maka lebar halaman atau posisi list menu(item menu pada navbar) akan fixed width, jika menggunakan <container-fuid> maka lebar halaman akan full width. Untuk lebih jelasnya pengaturan layout silakan baca tutorial sebelumnya mengenai Pengaturan layout website menggunakan bootstrap.
  • Baris 10-18 adalah bagian class navbar-header. Jadi kita terlebih dahulu(harus) membuat class navbar-header, agar navbar dan list menu yang terdapat di dalamnya responsif dapat menyesuaikan dengan perangkat yang mengakses seperti smartphone, tablet maupun desktop.
  • Pada baris 11-16 untuk menampilkan button/ icon menu(biasanya mirip seperti garis sebanyak tiga kali) pada perangkat smartphone dan tablet. Baris 17, class navbar-brand untuk menampilkan nama website atau logo website.
  • Baris 19, terdapat class collapse navbar-collapse sebagai aksi dari icon menu(baris 11-16) digunakan agar item menu nantinya pada perangkat smartphone dan tablet dapat di collapse dan ditampilkan lagi.
  • Baris 20-30, list untuk membuat item menu dalam navbar. Pada baris 21 adalah menu yang aktif saat website diakses.

Berikut ini hasilnya(versi desktop)

Membuat navbar dan dropdown menu dengan bootstrap

Ketika diakses menggunakan perangkat lain seperti smartphone dan tablet hasilnya seperti berikut

Contoh 2 membuat navbar dan dropdown menu dengan bootstrap

Seperti yang saya sampaikan sebelumnya, dropdown menu  berada dalam navbar sebuah website. Contoh penerapannya adalah seperti kode berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Navbar Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
        <nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle Nav</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">ITGeek</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Vb.Net</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">JAVA</a></li>
                <li><a href="#">C#</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Database <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">MariaDB</a></li>
                    <li><a href="#">SQL Server</a></li>
                    <li><a href="#">Oracle</a></li>
                    <li><a href="#">PostgreSQL</a></li>
                    <li><a href="#">MongoDB</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">WAMPP</a></li>
                    <li><a href="#">XAMPP</a></li>
                    <li><a href="#">PHP Triad</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>    
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Kode diatas tidak jauh berbeda dengan yang sebelumnya. pada baris ke-8 kita gunakan jenis navbar navbar-inverse untuk membuat navbar berwarna hitam.
  • Baris 27 sampai 40 untuk membuat dropdown menu. Baris 27 memulai class dropdown menu dengan membuat class dropdown, baris 28 untuk membuat icon dropdown dan  menampilkan isi dari dropdown menu.
  • Pada baris 29 sampai dengan 39 adalah list menu yang terdapat dalam dropdown menu dan berada dalam class dropdown-menu. Pada baris 35 terdapat satu class separator yang dapat kita gunakan untuk membuat garis pemisah antar item menu.

Hasilnya adalah sebagai berikut:

Contoh 3 membuat navbar dan dropdown menu dengan bootstrap

Umumnya dalam sebuah website terdapat inputan untuk melakukan pencarian, bootstrap juga mendukung penempatan elemen form dalam navbar. Tutorial tentang form silakan dibaca di Merancang Form dengan Bootstrap. Berikut contohnya untuk menampilkan form pencarian dalam navbar.

<!DOCTYPE html>
<html>
  <head>
    <title>Navbar Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
        <nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle Nav</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">ITGeek</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Vb.Net</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">JAVA</a></li>
                <li><a href="#">C#</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Database <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">MariaDB</a></li>
                    <li><a href="#">SQL Server</a></li>
                    <li><a href="#">Oracle</a></li>
                    <li><a href="#">PostgreSQL</a></li>
                    <li><a href="#">MongoDB</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">WAMPP</a></li>
                    <li><a href="#">XAMPP</a></li>
                    <li><a href="#">PHP Triad</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="isikan keyword">
                </div>
                <button type="submit" class="btn btn-default">Cari</button>
              </form>
            </div>
          </div>
        </nav>    
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada kode tidak jauh berbeda dengan sebelumnya, hanya saja ditambahkan kode untuk form pencarian pada baris 42 sampai 47. Pada baris 42, dalam tag form di berikan class navbar-form agar posisi form pencarian berada pada navbar. Untuk mengubah bentuk inputan pencarian dan juga  button/tombol dalam bootstrap silakan baca tutorial sebelumnya yang membahas tentang Membuat Button/tombol dengan Bootstrap.

Berikut ini tampilan hasilnya

Contoh 3 membuat navbar dan dropdown menu dengan bootstrap

Selanjutnya, secara default posisi item menu pada navbar bootstrap dimulai dari kiri. Kita juga dapat menambahkan item menu lain yang posisinya sebelah kanan. Dalam website pada umumnya, posisi ini biasa digunakan untuk menu registrasi member, login, logout ataupun profile member.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Navbar Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
        <nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle Nav</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">ITGeek</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Vb.Net</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">JAVA</a></li>
                <li><a href="#">C#</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Database <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">MariaDB</a></li>
                    <li><a href="#">SQL Server</a></li>
                    <li><a href="#">Oracle</a></li>
                    <li><a href="#">PostgreSQL</a></li>
                    <li><a href="#">MongoDB</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">WAMPP</a></li>
                    <li><a href="#">XAMPP</a></li>
                    <li><a href="#">PHP Triad</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="isikan keyword">
                </div>
                <button type="submit" class="btn btn-default">Cari</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  <span class="glyphicon glyphicon-user" aria-hidden="true"></span> User <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Logout</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>    
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Pada kode diatas, masih tidak jauh berbeda dengan yang sebelumnya. Untuk membuat item menu di sebelah kanan dimulai dari baris 48 sampai 57. Pada baris 48 di ditambahkan class baru yaitu  navbar-right sehingga posisi item menu yang kita buatkan ini nantinya akan berada di sebelah kanan. Ingat!!, untuk item menu yang posisinya sebelumnya menu ini(menu form pencarian) harus ditambahkan class navbar-left (lihat baris 42) agar posisinya tidak saling menimpa.
  • Baris 49-56 untuk membuat item menu dalam bentuk dropdown menu. Pada baris ke 51 kita buatkan class glyphicon glyphicon-user untuk menampilkan icon user. Icon-icon dalam bootstrap dan cara penggunaanya kita bahas dalam tutorial Cara menggunakan icon glyphicon dengan bootstrap.

Hasilnya seperti gambar berikut

Contoh 4 membuat navbar dan dropdown menu dengan bootstrap

Demikian tutorial bootstrap tentang cara Membuat Navigation Bar/ Navbar dan Dropdown Menu Dengan Bootstrap yang memudahkan kita mendesign navigasi website yang responsif.

Tutorial selanjutnya adalah Cara menggunakan Icon Glyphicon pada Bootstrap, di tutorial tersebut kita akan membahas icon-icon apa saja yang terdapat pada bootstrap dan cara penggunaannya.

 

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

3 comments

  1. Gan Boleh Tempat Saya Menu Dropdown Nya kk gak Muncul Juga Y gan..?

  2. I often visit your website and have noticed that you don’t
    update it often. More frequent updates will give your site higher authority & rank in google.
    I know that writing content takes a lot of time, but you
    can always help yourself with miftolo’s tools which will shorten the time of creating an article to a couple of
    seconds.

Leave a Reply

Your email address will not be published. Required fields are marked *