Apa itu navbar pada bootstrap?

Question

Melanjutkan tutorial saya yang kemarin tentang breadcrumb sekarang saya akan membuat tutorial yang gak beda jauh dengan breadcrumb yaitu membuat navbar pada website dengan menggunakan bootstarp 4.

Table of Contents Show

Menampilkan Judul Pada Navbar
Button toggler
Membuat Menu pada Navbar
Cara membuat menu dropdown sederhana
Cara membuat menu navigasi
Merubah Warna Menu Navigasi
Menambahkan Logo pada menu navigasi
Menambahkan Collapse pada menu navigasi
Membuat Dropdown pada Menu Navigasi
Menambahkan form dan tombol pada menu navigasi
Membuat Fixed Navigation
Membuat Sticky Top pada navigasi menu

Seperti namanya navbar berfungsi sebagai navigasi bar, tempat menyimpan menu dalam sebuah website. Cara membuat navbar dengan bootstrap 4 adalah dengan menggunakan tag html "nav".

Baca Juga : Membuat breadcrumb dengan bootstrap 4


//isi dari navbar

Kode html di atas adalah contoh sederhana dari navbar light dengan bacground warna dark. Untuk mengganti bacground pada navbar kamu dapat mengganti "bg-dark" dengan bg{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Sedangkan tema dari warna navbar kamu dapat mengganti "navbar-dark" dengan navbar{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white}. Untuk expand navbar kamu dapat menambahkan class navbar-expand{-sm|-md|-lg|-xl}.

Sekarang saya akan tambahkan gambar, link, dan tulisan untuk nemampilakn judul pada navbar dengan cara memasukan kode html di bawah ini pada html tag nav.

  
    
    [RumahCode.ORG]

Button toggler

Untuk membuat navbar menjadi responsive dan dapat memunculkan menu ketika browser dikecilkan ukuran nya kita membutuhkan button toggler dengan menambahkan kode html di bawah ini setelah kode di atas

Sekarang kita buat menu pada navbar dengan menggunakan tag ul,li



      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide

sehingga kode html membuat navbar dan menu nya kan menjadi seperti ini


  
    
    [RumahCode.ORG]
  
  
    
    


      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide

contoh kode html di atas adalah contoh untuk membuat navbar sederhana. Bagaimana caranya membuat menu dropdown pada navbar? cara membuat menu dropdown dengan bootstrap 4 adalah memambahkan kode html di bawah ini

  
        
          Bootstrap 4 - 03.1: Content
          Bootstrap 4 - 02.3: Layout pada Bootstrap 4
          
          Tutorial Dasar Bootstrap 4

sehingga menjadi seperti ini


  
    
    [RumahCode.ORG]
  
  
    
    


      
        Bootstrap 4 - 04.1: Component
      
      
        Bootstrap 4 - 04.2: Image Slide
        

        
          Bootstrap
        
  
        
          Bootstrap 4 - 03.1: Content
          Bootstrap 4 - 02.3: Layout pada Bootstrap 4
          
          Tutorial Dasar Bootstrap 4

Jika kamu masih bingung dengan cara membuat navbar, menu, atau membuat sub menu dropdown dengan menggunakan bootstrap 4 kamu dapat melihat demo dan mengoprek nya sehingga kamu dapat mengerti bagaimana caranya membuat navbar dengan menu dropdwon sederhana

Selamat datang di warung belajar, masih dalam seri tutorial bootstrap 4, dalam tutorial ini kita akan membahas mengenai pembuatan menu navigasi dengan bootstrap, menu navigasi adalah hal yang cukup penting dalam pembuatan aplikasi berbasis web, bootstrap 4 memberikan beberapa class yang bisa digunakan untuk membuat navigasi dengan tampilan yang menarik, baik langsung saja kita mulai pembahasannya.

Untuk membuat menu navigasi anda bisa menggunakan tag <nav> lalu menambahkan class .navbar didalam tag tersebut, selain itu anda juga bisa menambahkan class expand-xl, expand-lg, expand-md, expand-sm (Class ini digunakan untuk mengatur menu navigasi agar tampil secara vertical ketika diakses dengan ukuran layar tertentu ) untuk pembahasan ukuran layar silahkan melihat di tutorial kami sebelumnya mengenal grid system pada bootstrap.

jadi semisal nih kita menambahkan navbar-expand-lg, sesuai aturan grid system lg itu digunakan untuk device ukuran besar, dengan ukuran lebar 992 pixel atau lebih, maka jika kita berikan class navbar-expand-lg pada menu navigasi, menu tersebut akan menjadi vertical ketika diakses menu dibawah ukuran 992 pixel.

Untuk contoh pembuatan menu navigasi perhatikan skrip dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

</li>

</li>

</li>

</ul>

Text pada Navbar

</span>

</nav>

<br>

<h3>Contoh Menu Navigasi</h3>

<p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

</body>

</html>

Semisal kita simpan dengan nama basic_navbar.html, lalu kita buka di browser maka hasilnya adalah :

Jika diakses dengan ukuran kurang dari 992 pixel maka menu navigasi menjadi vertical.

Keterangan :

Untuk membuat navigasi silahkan buat tag <nav> dan tambahkan class navbar, perhatikan line 14
tambahkan juga class .navbar-expand-lg untuk membuat menu navigasi dengan tampilan horizontal, anda bisa mengganti dengan class lain seperti class expand-xl, expand-md, expand-sm silahkan sesuaikan dengan pengaturan tampilan seperti yang telah dijelaskan dibagian sebelumnya
pada line 14 jika anda tidak menambahkan class navbar-expand-lg maka menu navigasi akan ditampilkan secara vertical bukan horizontal
lalu berikutnya anda bisa mengatur warna pada navigasi yang diinginkan dalam contoh diatas di line 14 kita tambahkan class .bg-dark sehingga warna navigasinya adalah hitam, anda juga mengganti dengan warna, detailnya nanti kita bahas di bagian selanjutnya.
berikutnya silahkan buat tag <ul> dan tambahkan class .navbar-nav perhatikan line 15
didalam tag <ul> tambahkan tag <li> dengan tambahakan class nav-item perhatikan pada line 16,19,22
didalam tag <li> tambahkan tag <a> dan tambahkan class nav-link perhatikan pada line 17, 20, 23
perhatikan line 26 kita menuliskan tag <span> dan memberikan class navbar-text untuk memberikan text pada bagian menu navigasi, serta kita tambahkan class text-white untuk memberikan warna putih pada text tersebut

Untuk merubah warna pada menu navigasi anda bisa menambahkan class yang disediakan oleh bootstrap untuk merubah warna menu navigasi, tambahkan class tersebut pada tag <nav>, classnya antara lain adalah :

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Baik untuk contoh penggunaannya adalah sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<a class="nav-link" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

</body>

</html>

Semisal kita simpan dengan nama warna_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

Menu navigasi akan ditampilkan sesuai dengan class warna yang ditambahkan pada tag <nav>, perhatikan penggunaan class tersebut di line 14,31, 48, 65, 82, 99, 116, dan 133
pada tag <nav> kita berikan class navbar-dark agar text pada menu berubah yang sebelumnya berwarna biru menjadi warna gelap
anda juga bisa memberikan class active pada tag <ul> untuk memberikan highlight pada link yang diinginkan
anda juga bisa memberikan class disaled pada tag <a> untuk mendisabled pada bagian link

Anda juga bisa menambahkan logo pada menu navigasi yang anda buat, caranya dengan menambahkan class navbar-brand, baik untuk contoh perhatikan skrip dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

</a>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Contact Us</a>

</li>

</ul>

</nav>

</body>

</html>

Semisal kita simpan dengan nama logo_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

Untuk membuat logo pada menu navigasi anda perlu membuat sebuah tag <a> dan menambahkan class navbar-brand seperti pada line 15, lalu silahkan buat tag <img> untuk memberikan gambar pada menu navigasi seperti pada line 15, jika anda mengetahui bagaimana cara menambahkan gambar pada html silahkan baca artikel kami mengenai cara menambahkan gambar dengan HTML

Anda juga dapat menambahkan fitur collapse pada menu navigasi yang anda buat dengan bootstrap, baik langsung saja contoh penggunaan collapse pada menu navigasi adalah sebagai berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<a class="navbar-brand" href="#">Navbar</a>

</button>

</li>

</li>

</li>

</ul>

</div>

</nav>

</body>

</html>

Semisal kita simpan dengan nama collapse_navbar.html, jika dibuka di browser maka hasilnya adalah :

Keterangan :

Untuk membuat collapse pada bagian menu navigasi buatlah <button>, tambahkan class navbar-toggler, lalu tambahkan attribute data–toggle dengan value collapse, dan tambahkan attribute data-target=’#nama-id’ nama id disini isikan sesuai dengan nama id yang digunakan pada bagian menu yang ingin ditampilkan secara collapse ketika tombol di klik, dalam contoh ini kita tuliskan nama id adalah kumpulan_menu, perhatikan line 15
diantara dari <button> </button> kita tuliskan tag <span> dengan class navbar-toggler-icon, untuk membuat icon pada bagian collapse, perhatikan line 16
berikutnya buat tag <div> sebelum tag <ul> dan tambahkan class collapse dan class navbar-collapse, dan tambahkan id yang sesuai dengan value pada attribute data-target, karena itu disini kita tambahkan id dengan nama kumpulan_menu, perhatikan pada line 18

Dalam bagian ini kita akan membahas mengenai cara menambahkan Dropdown pada menu navigasi, untuk contoh perhatikan skrip dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

</li>

</li>

Menu 3

</a>

</div>

</li>

</ul>

</nav>

<br>

</body>

</html>

Semisal kita simpan dengan nama dropdown_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

untuk membuat dropdown tambahkan class dropdown pada tag <li> perhatikan line 27
lalu tambahkan menu sebagai pemicu dropdown menu, dengan membuat tag <a> dan tambahkan class dropdown-toggle, lalu tambahkan id semisal dengan nama navbardrop, dan tambahkan attribute data-toogle dengan value dropdown, perhatikan line 28
Berikutnya buatlah tag <div> yang digunakan untuk membuat dropdown menunya, tambahkan class dropdown-menu perhatikan pada line 31
didalam tag <div> anda dapat menuliskan link dengan menggunakan tag <a> dan tambahkan class dropdown-item, perhatikan line 32 – 34

Anda juga bisa menambahkan form dan tombol pada menu navigasi, anda bisa memanfaatkan hal ini untuk membuat beberapa hal semisal form pencarian pada bagian menu navigasi, untuk contohnya perhatikan skrip dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<li>

</li>

</li>

</li>

</ul>

<button class="btn btn-success" type="submit">Search</button>

</form>

</nav>

<br>

</body>

</html>

Semisal kita simpan dengan nama form_pada_menu_navigasi.html, lalu kita buka di browser maka hasilnya :

Keterangan :

Perhatikan pada line 25 kita menambahkan form dengan class form-inline, lalu silahkan tambahkan field untuk bagian formnya, dan tombol.

Fixed Navigation adalah istilah untuk membuat menu navigasi yang fixed berada dibagian tertentu meskipun browser di scroll, untuk contoh pembuatannya adalah seperti berikut ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

</li>

</li>

</li>

</ul>

Text pada Navbar

</span>

</nav>

<br/>

<h3>Contoh Menu Navigasi</h3>

<p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

</body>

</html>

Semisal kita simpan dengan nama fixed_top_navbar.html, lalu kita buka di browser maka hasilnya :

dan ketika di scroll maka hasilnya adalah seperti berikut ini :

Keterangan :

Pada bagian navbar kita berikan class fixed-top pada line 14, karena itu ketika di scroll maka navbar akan static dibagian atas, jika anda ingin fixednya dibagian bawah maka tambahkan class fixed-bottom

Sticky top disini maksudnya adalah menu navigasi ketika di scroll akan berada diatas sama seperti konsep fixed-top, hanya saja untuk posisi menu navigasi awalnya tidak berada diatas, tapi ditengah konten.

untuk contoh skripnya adalah seperti berikut ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html>

<head>

<title>Menu Navigasi</title>

</head>

<h3>Contoh Menu Navigasi</h3>

<p>Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, Ini adalah Content Pembuka, </p>

</div>

</li>

</li>

</li>

</ul>

Text pada Navbar

</span>

</nav>

<h3>Contoh Menu Navigasi</h3>

<p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>

</div>

</body>

</html>

Semisal kita simpan dengan nama sticky_top_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Posisi dari menu berada dibagian tengah, tetapi ketika di scroll maka hasilnya menu navigasi akan tertahan dibagian atas.

Keterangan :

kita menambahkan class sticky-top pada tag <nav> coba perhatikan di Line 18, karena itu posisi menu navigasi akan sticky top ketika dilakukan scroll

Baik sekian dulu teman – teman pembahasan mengenai bagaimana cara membuat menu navigasi dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa ditutorial bootstrap 4 selajutnya.

kode bootstrap