side navigation bootstrap Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/side-navigation-bootstrap/ Tue, 26 Aug 2025 07:50:36 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png side navigation bootstrap Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/side-navigation-bootstrap/ 32 32 Side navigation bootstrap sidebar gratis siap pakai full code https://farhanhidayat.com/side-navigation-bootstrap-sidebar-gratis-siap-pakai-full-code/ https://farhanhidayat.com/side-navigation-bootstrap-sidebar-gratis-siap-pakai-full-code/#respond Tue, 26 Aug 2025 07:50:36 +0000 https://farhanhidayat.com/?p=1796 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, […]

Artikel Side navigation bootstrap sidebar gratis siap pakai full code pertama kali tampil pada Farhanhidayat.com.

]]> 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/boxicons@2.1.4/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.

🚀 Lihat Demo Sidebar Langsung di Sini

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.

 

 

Artikel Side navigation bootstrap sidebar gratis siap pakai full code pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/side-navigation-bootstrap-sidebar-gratis-siap-pakai-full-code/feed/ 0