How to Create Scrollable Sidebar with Icons in Bootstrap 5 ?

Last Updated : 26 Feb, 2024

To create a scrollable sidebar with icons in Bootstrap 5, we can use the Bootstrap grid system for layout, incorporating a container, row, and column structure. Place your sidebar content inside a div with the appropriate classes to control its appearance.

Use Bootstrap’s utility classes and icon libraries for icon integration. Additionally, consider applying custom CSS for styling and implementing the scrollable feature.

Preview:

Screenshot-2024-02-16-121952

Approach:

Set up a basic HTML document. Include Bootstrap and Bootstrap Icons CSS files.
Add a fixed sidebar with navigation links and a heading. Use Bootstrap classes for styling.
Create a main content area where your page content will be displayed. Apply necessary styling using Bootstrap classes.
Add a toggle button to switch the sidebar visibility.Use a button with an menu icons.
Write JavaScript to handle the toggle functionality. Toggle the sidebar visibility and update the button icon accordingly.
Consider making the sidebar responsive for smaller screens.Adjust styles or use Bootstrap responsive classes if needed.

Example: Implementation to create a scrollable sidebar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
          rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
 
        #sidebar {
            height: 100vh;
            position: fixed;
            top: 0;
            left: -250px;
            z-index: 1000;
            padding-top: 3.5rem;
            overflow-y: auto;
            background-color: #343a40;
            color: #fff;
            transition: left 0.3s;
        }
 
        #sidebar a {
            padding: 15px 20px;
            display: block;
            color: #fff;
            text-decoration: none;
        }
 
        #sidebar a:hover {
            background-color: #495057;
        }
 
        #sidebar .sidebar-heading {
            padding: 1.5rem 1rem;
            font-size: 1.2rem;
        }
 
        .navbar-brand,
        #menu-toggle {
            background-color: #343a40;
            padding: 0.75rem 1rem;
            text-decoration: none;
            color: #fff;
        }
 
        .content {
            margin-left: 0;
            padding: 15px;
            transition: margin-left 0.3s;
        }
    </style>
</head>
 
<body>
 
<div id="sidebar">
        <a href="#"><i class="bi bi-house-door"></i> Home</a>
        <a href="#"><i class="bi bi-person"></i> Contact</a>
        <a href="#"><i class="bi bi-gear"></i> Settings</a>
        <a href="#"><i class="bi bi-envelope"></i> Email</a>
        <a href="#"><i class="bi bi-file-text"></i> Explore</a>
    </div>
 
    <div class="content">
        <button id="menu-toggle" class="btn">
              <i class="bi bi-list"></i>
          </button>
        <h2>GeeksforGeeks</h2>
        <p>This is the Geeks portal.</p>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('menu-toggle').addEventListener('click', function () {
            const sidebar = document.getElementById('sidebar');
            const content = document.querySelector('.content');
            const menuToggle = document.getElementById('menu-toggle');
 
            if (sidebar.style.left === '-250px') {
                sidebar.style.left = '0';
                content.style.marginLeft = '250px';
               
                  // Change to ❌ when sidebar is open
                menuToggle.innerHTML = '<i class="bi bi-x"></i>'; 
            } else {
                sidebar.style.left = '-250px';
                content.style.marginLeft = '0';
                   
                  // Change back to ☰ when sidebar is closed
                menuToggle.innerHTML = '<i class="bi bi-list"></i>'; 
            }
        });
    </script>
</body>
 
</html>