Side navigation bootstrap sidebar gratis siap pakai full code

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.

Apa Itu Side Navigation Bootstrap

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:

  • Lebih ringan karena nggak bergantung framework,
  • Fleksibel karena bisa dimodifikasi sesuai kebutuhan,
  • Cocok untuk belajar dasar HTML & CSS sebelum masuk ke framework.

Persiapan Sebelum Membuat Sidebar

Sebelum langsung nulis kode, ada dua hal dasar yang perlu disiapkan:

a. File & Struktur Dasar HTML

Buat file index.html dengan struktur sederhana.

b. CSS

Buat file style.css. File ini yang akan mengatur tampilan sidebar. Di sini kita bisa menentukan ukuran, warna, posisi, sampai efek responsivenya.

Side Navigation Bootstrap Full Code

side navigation bootstrap

Sekarang kita masuk ke bagian utama: kode sidebar lengkap.

Code HTML (Siap Pakai)

<!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>

Code CSS (Siap Pakai)

*{
	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.

Tips dan Modifikasi Sidebar

Supaya sidebar lebih menarik dan sesuai kebutuhan website kamu, ada beberapa hal yang bisa kamu modifikasi:

  • Warna dan tema: ganti background: #0f1724; sesuai branding.
  • Tambahkan ikon: gunakan Font Awesome atau SVG kecil biar menu lebih hidup.
  • Hover effect: tambahkan transisi 0.3s biar saat hover terasa smooth.
  • Responsive lebih canggih: kalau mau, kamu bisa ubah sidebar jadi off-canvas (muncul setelah klik tombol menu).

Dengan sedikit modifikasi, sidebar ini bisa jadi jauh lebih keren tanpa ribet.

Kesimpulan

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.

 

 

Berbagi wawasan dan tips praktis seputar dunia digital.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You might also like
Template Landing Page Free Responsive untuk Website Kampus

Template Landing Page Free Responsive untuk Website Kampus

Framework JavaScript Terbaik untuk Developer di 2025

Framework JavaScript Terbaik untuk Developer di 2025

Kalkulator Sederhana HTML CSS & JavaScript Panduan Lengkap

Kalkulator Sederhana HTML CSS & JavaScript Panduan Lengkap

cara membuat dashboard dengan HTML, CSS, dan JavaScript

cara membuat dashboard dengan HTML, CSS, dan JavaScript

HTML Forms Templates dengan Validasi Form Menggunakan JS

HTML Forms Templates dengan Validasi Form Menggunakan JS

Portfolio template free dengan Three.js untuk Website 3D

Portfolio template free dengan Three.js untuk Website 3D