How to Create Scrollable Sidebar with Icons in Bootstrap 5 ?

Last Updated : 30 Jul, 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/[email protected]/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/[email protected]/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>

Output:

How to create Flex Box Container with Scrollable Content in Bootstrap 5?

p1803lbif

Improve

Article Tags :

How to Create Scrollable Sidebar with Icons in Bootstrap 5 ?

Preview:

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?