How to create sidebar navigation for Bootstrap 5 ?

Hello there, initially this was just a mental concept where I got an idea to create a fixed left-sidebar navigation for my tools site (free online web development tools) – https://tools.webdevpuneet.com/ . I realized that the normal sticky-top Bootstrap navbar which I had initially for all screen sizes (screenshot shared below) did not expose other tools when users landed on one on big screens. I think the top navigation is rarely used by users especially new users that came to your website through google or any other referral as they are only interested in the content.

After some contemplation, I got this great idea to convert the normal Bootstrap top sticky navbar to fixed left sidebar navigation to save all that rework time and effort that would come with creating a new sidebar nav from scratch and implement it on all my tools manually.

---

Putting scrollable fixed sidebar on the left gave that amazing overall tools exposure and professional impact and I have been jumping from one tool to another and enjoying it.

Screenshots before and after:

---

Here in the tools, I have done it using media queries for screens equal to or more than 1600px i.e.

@media (min-width:1600px){
    // All new styles for sidebars written under this media query
}

Check out these tools as a live demo – https://tools.webdevpuneet.com/ and try to play with the width below 1600px to get the top fixed bootstrap navbar back.

---

CSS for Bootstrap 5 Fixed Left Sidebar Navigation

/* CSS for Bootstrap 5 Fixed Left Sidebar Navigation */

@media(min-width:1600px){

body {
	padding-left: 300px;
	padding-right: 60px;
}
nav.navbar {
	position: fixed;
	left: 0;
	width: 300px;
	bottom: 0;
	top: 0;
	overflow-y: auto;
	overflow-x: hidden;
	display: block;
	border-right: 1px solid #cecece;
}
nav.navbar >.container {
	flex-direction: column;
	padding: 0;
}
nav.navbar .navbar-nav {
	flex-direction: column;
}
nav.navbar .navbar-collapse {
	width: 100%;
}
nav.navbar .navbar-nav {
	width: 100%;
}
nav.navbar .navbar-nav .dropdown-menu {
	position: static;
	display: block;
}
nav.navbar .dropdown {
	margin-bottom: 5px;
	font-size: 14px;
}
nav.navbar .dropdown-item {
	white-space: normal;
	font-size: 14px;
	vertical-align: middle;
}
nav.navbar .dropdown-item img {
	margin-right: 5px;
}
nav.navbar .dropdown-toggle {
	cursor: default;
}
nav.navbar .dropdown-menu {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}
nav.navbar .dropdown-toggle::after {
	display: none;
}
}

Some details about what I did here:

I gave a left padding 300px to the body tag to create a space for sidebar navigation. Then manipulated the top navbar with width = 300px and made it scrollable and fixed to the left-most part of the viewport. It shows a scrollbar if the collective height of the nav-links inside is more than the viewport height.

After this, I manipulated all display: flex items to width:100% and flex-direction: column; so all navigation links fall one below the other. I also forced dropdowns to show up all the time and hide all carets/arrows used to show dropdowns.

This saved me a lot of time. I hope you liked this trick. I think left sidebar navigations are cool for websites like tools where you can showcase your other items to users when they visit.

Thank you.