Responsive Sidebar Menu With Sub Menu Using Bootstrap 5

Learn how to create a responsive sidebar menu using Bootstrap 5.

Responsive Sidebar Menu With Sub Menu Using Bootstrap 5

Responsive Sidebar Menu Using Bootstrap 5

This Responsive Sidebar Menu is built using HTML, CSS, and Bootstrap 5 to create a modern side navigation system with expandable submenus. The design provides an organized navigation structure that allows users to access different sections of a website through a clean and user-friendly sidebar interface.

The project uses Bootstrap 5 collapse components and toggle functionality to create smooth submenu interactions. Multiple submenu levels can be added to organize navigation links effectively, while the responsive layout ensures seamless usability across desktops, tablets, and mobile devices.

Steps to Create a Responsive Sidebar Menu

Follow these simple steps to build a sidebar navigation bar with submenus:

Create a project folder, for example, responsive-sidebar-menu-bootstrap-5.
Inside the folder, create two files: index.html and style.css.
Add the Bootstrap 5 CDN link to your HTML document.
Create the sidebar structure using HTML and Bootstrap components.
Add navigation links and multi-level submenu sections.
Use Bootstrap 5 collapse functionality to expand and collapse submenus.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar using Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper d-flex w-100">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header p-3">
                <h3 class="text-white m-0 fs-5"><i class="fas fa-bars me-2"></i>Bootstrap 5 Sidebar</h3>
            </div>
            <ul class="list-unstyled my-4">
                <p class="text-white text-uppercase py-2 px-3 fw-bold">The Providers</p>
                <li>
                    <a href="#homeSubmenu" data-bs-toggle="collapse" class="dropdown-toggle">
                        <i class="fas fa-home me-2"></i>Home
                    </a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">Overview</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fas fa-info-circle me-2"></i>About</a></li>
                <li>
                    <a href="#pageSubmenu" data-bs-toggle="collapse" class="dropdown-toggle">
                        <i class="fas fa-file-alt me-2"></i>Pages
                    </a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fas fa-envelope me-2"></i>Contact</a></li>
            </ul>

            <ul class="list-unstyled p-4">
                <li>
                    <a href="#" class="btn btn-outline-light btn-sm fs-6  rounded-3 mb-2">
                        <i class="fas fa-download me-2"></i>Download
                    </a>
                </li>
                <li>
                    <a href="#" class="btn btn-light btn-sm text-primary fs-6 rounded-3">
                        <i class="fas fa-newspaper me-2"></i>Articles
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Page Content -->
        <div id="content">
            <nav class="navbar navbar-light bg-light mb-4 ">
                <div class="container-fluid">
                    <button id="sidebarCollapse" class="btn btn-primary">
                        <i class="fas fa-align-left me-2"></i>Toggle Sidebar
                    </button>
                </div>
            </nav>
            
            <div class="bg-white rounded-4 p-4  mt-5 mb-5 shadow-lg">
                <h2><i class="fas fa-tachometer-alt me-2"></i>Collapsible Sidebar using Bootstrap 5</h2>
                <p>
                    <strong>Welcome to the improved Bootstrap 5 sidebar!</strong> This sidebar has been completely fixed
                    and enhanced with modern features. It includes proper Bootstrap 5 syntax, working collapse
                    functionality, smooth animations, and responsive design.
                </p>

                <p>
                    The sidebar now includes Font Awesome icons, proper dropdown menus that work correctly, and smooth
                    transitions. All the previous issues have been resolved including the typo in class names, outdated
                    Bootstrap attributes, and missing CSS styles.
                </p>


            </div>

        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        document.getElementById('sidebarCollapse').addEventListener('click', function () {
            document.getElementById('sidebar').classList.toggle('active');
        });
    </script>

</body>

</html>

Apply custom CSS styling to enhance the sidebar appearance. Make the sidebar fully responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to test the navigation system.

                            
                                <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: #fafafa;
        }

        .text-primary {
            color: #506bda !important;
        }

        #sidebar {
            min-width: 250px;
            max-width: 250px;
            background: #506bda;
            transition: all 0.3s;
            height: 100vh;
        }

        #sidebar.active {
            margin-left: -250px;
        }

        #sidebar .sidebar-header {
            background: #3754c7;
        }

        #sidebar ul li a {
            padding: 10px 20px;
            display: block;
            color: #fff;
            text-decoration: none;
        }

        #sidebar ul li a:hover {
            background: #fff;
            color: #506bda;
        }

       #sidebar ul ul a {
            padding-left: 40px !important;
            background: #3754c7;
        }

        #content {
            width: 100%;
            padding: 20px;
            transition: all 0.3s;
        }

        @media (max-width: 768px) {
            #sidebar {
                margin-left: -250px;
            }

            #sidebar.active {
                margin-left: 0;
            }
        }
    </style>

Download Code Files