Sidebar adalah elemen umum dalam desain web yang memungkinkan kita dengan mudah mengakses berbagai bagian dari situs web. Dalam tutorial ini, kita akan belajar cara membuat sidebar dengan sub menu Bootstrap dan FontAwesome. Sidebar ini akan berisi beberapa item menu utama dan beberapa sub-menu yang dapat di-expand dan di-collapse.

Table of Contents

1. Menyiapkan Dasar HTML

Untuk dasar HTML nya adalah sebagai berikut:

<div class="container-fluid">
        <div class="row">
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block sidebar mt-5">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Beranda
                            </a>
                        </li>
                        <li class="nav-item has-submenu">
                            <a class="nav-link" href="#">
                                <i class="fa-solid fa-chevron-right fa-xs" id="arrow-icon"></i>
                                Menu 1
                            </a>
                            <ul class="submenu collapse">
                                <li><a class="nav-link" href="#">Submenu item 1</a></li>
                                <li><a class="nav-link" href="#">Submenu item 2</a></li>
                                <li><a class="nav-link" href="#">Submenu item 3</a></li>
                            </ul>
                        </li>
                        <li class="nav-item has-submenu">
                            <a class="nav-link" href="#">
                                <i class="fa-solid fa-chevron-right fa-xs" id="arrow-icon"></i>
                                Menu 2
                            </a>
                            <ul class="submenu collapse">
                                <li><a class="nav-link" href="#">Submenu item 1</a></li>
                                <li><a class="nav-link" href="#">Submenu item 2</a></li>
                                <li><a class="nav-link" href="#">Submenu item 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-5">
                <h1>Konten</h1>
            </main>
        </div>
    </div>

2. Menambahkan Bootstrap & Fontawesome

Untuk membuat layout, saya menggunakan bootstrap dan icon saya gunakan fornawesome, berikut adalah CDN yang saya gunakan:

    <!-- Tambahkan Fontawesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

 <!-- Tambahkan Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">
        </script>

3. Menambah Kode JavaScript

Untuk melakukan animasi (membuka dan menutup) menu kita membutuhkan javascript seperti berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Kode JavaScript Anda -->
    <script>
        $(document).ready(function () {
            // Inisialisasi status ikon
            var iconRotated = false;

            $('.nav-link').click(function (e) {
                e.preventDefault();
                var $submenu = $(this).next('.submenu');
                var $arrowIcon = $(this).find('#arrow-icon');

                if ($submenu.length) {
                    var mycollapse = new bootstrap.Collapse($submenu[0]);

                    if ($submenu.hasClass('show')) {
                        mycollapse.hide();
                        $arrowIcon.css("transform", "rotate(0deg)");
                        iconRotated = false;
                    } else {
                        mycollapse.show();
                        if (iconRotated) {
                            $arrowIcon.css("transform", "rotate(0deg)");
                        } else {
                            $arrowIcon.css("transform", "rotate(90deg)");
                        }
                        iconRotated = !iconRotated;
                    }
                }
            });
        });
    </script>

4. Menyiapkan CSS

Untuk memberikan style dapat menggunakan css sebagai berikut:

 <style>
        .sidebar li .submenu {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .position-sticky {
            background-color: #f5f5f7;
        }
    </style>

5. Hasil

Dari kode diatas, hasilnya adalah sebagai berikut, silahkan di klik salah satu menu:

Konten

Semoga artikel Sidebar Sub Menu Bootstrap dan FontAwesome ini bermanfaat.

Baca juga: Simpan HTML menjadi Gambar