Kalau lagi bikin website, navigasi itu penting banget. Dengan adanya sidebar, pengunjung bisa lebih mudah pindah dari satu halaman ke halaman lain. Nah, di artikel ini kita akan bahas cara bikin side navigation bootstrap. Walaupun ada kata “bootstrap”, sebenarnya contoh kode yang aku bagikan ini full HTML + CSS murni. Tujuannya biar ringan, mudah dipahami, dan langsung bisa kamu pakai tanpa framework tambahan.
Secara sederhana, side navigation bootstrap bisa dipahami sebagai sidebar atau menu samping yang sering dipakai dalam desain web modern. Biasanya kalau pakai Bootstrap, banyak class bawaan yang membantu kita bikin sidebar lebih cepat.
Tapi kabar baiknya, sidebar ini bisa juga dibuat dengan HTML dan CSS saja. Keuntungannya:
Sebelum langsung nulis kode, ada dua hal dasar yang perlu disiapkan:
Buat file index.html dengan struktur sederhana.
Buat file style.css. File ini yang akan mengatur tampilan sidebar. Di sini kita bisa menentukan ukuran, warna, posisi, sampai efek responsivenya.
Sekarang kita masuk ke bagian utama: kode sidebar lengkap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Side Menu</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/boxicons.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li>
<a href="#" class="nav-link">
<span class="item-icon">
<i class="bx bxs-home"></i>
</span>
<span class="item-txt">Home</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<span class="item-icon">
<i class="bx bxs-info-circle"></i>
</span>
<span class="item-txt">About</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<span class="item-icon">
<i class="bx bx-task"></i>
</span>
<span class="item-txt">Services</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<span class="item-icon">
<i class="bx bxs-contact"></i>
</span>
<span class="item-txt">Contact</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #4ac8c0;
}
.container {
height: 270px;
width: 550px;
border-radius: 8px;
box-shadow: 15px 35px 20px rgba(0, 0, 0, 0.5), -10px -20px
20px rgba(0, 0, 0, 0.05);
background-color: #1e272e;
border: 1.3px solid #ddd;
}
.sidebar{
width: 60px; height: 100%;
background-color: #ff3f34;
padding: 20px;
box-sizing: border-box; color: #fff;
overflow: hidden;
border-radius: 8px 0 0 8px;
border-right: none;
transition: width .75s ease;
}
.sidebar:hover{
width: 200px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
row-gap: 1rem;
}
li {
padding: 10px 10px;
border-bottom: 2px solid #ff6348;
border-radius: .5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
li:hover {
background-color: #ff6348;
}
.nav-link {
display: inline-flex;
column-gap: 1rem;
color: inherit;
text-decoration: none;
}
.item-txt {
padding-left: .5rem;
}
.attribute {
position: absolute;
bottom: 10px;
}
Kode di atas sudah cukup untuk bikin sidebar sederhana, rapi, dan responsive. Di layar besar tampil di kiri, di layar kecil berubah jadi menu di atas.
Supaya sidebar lebih menarik dan sesuai kebutuhan website kamu, ada beberapa hal yang bisa kamu modifikasi:
Dengan sedikit modifikasi, sidebar ini bisa jadi jauh lebih keren tanpa ribet.
Bikin side navigation bootstrap ternyata nggak selalu harus pakai framework. Dengan HTML dan CSS sederhana, kita sudah bisa membuat sidebar gratis, siap pakai, dan responsive.
Keunggulannya: mudah dimengerti, ringan, fleksibel, dan gampang kamu ubah sesuai kebutuhan website. Tinggal copy-paste kode di atas, lalu modifikasi sedikit, sidebar langsung jalan di berbagai jenis website.
Kalau kamu butuh navigasi yang simpel tapi tetap terlihat profesional, sidebar HTML + CSS ini bisa jadi pilihan terbaik.