Setiap dari kita pasti mengetahui yang namanya website. Website adalah kumpulan halaman situs yang terdapat dalam sebuah domain atau subdomain pada jaringan World Wide Web (WWW) di Internet. Di era digital saat ini, internet merupakan salah satu sarana yang banyak digunakan untuk memudahkan berbagai kegiatan.
Dalam setiap website pasti memiliki suatu bagian yang sangat penting. Apa itu?
Bagian yang sangat penting itu adalah Bagian Navbar. Navbar itu seperti apa sih. Berikut ini adalah contoh dari Navbar:

Jadi, arti dari 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.
lalu, bagaimana cara membuat Navbar? Berikut ini adalah cara membuat Navbar sederhana dengan HTML dan CSS.
Code HTML:
<nav>
<h2><a href=”#”>Navbar</a></h2>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
Code CSS:
* {
margin: 0;
padding: 0;
}
nav {
background-color: #f5970a;
display: flex;
justify-content: space-between;
padding: 10px;
}
nav h2 a {
color: #ffffff;
text-decoration: none;
}
nav ul {
display: flex;
align-items: center;
}
nav ul li {
list-style-type: none;
padding: 5px;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #000000;
}
Fungsinya masing-masing:
- margin = Untuk mengatur jarak sisi luar border di konten,
- padding = Untuk mengatur jarak antara konten dengan border,
- background-color = Untuk membuat warna background pada konten
- color = Untuk membuat warna pada konten,
- display: flex; = Agar elementnya tidak saling menimpa tapi malah dibagi dua,
Silahkan belajar web di Website Dhuo Creative.
Baca juga apa itu Navbar.