Bootstrap Vertical Menu with Submenu on Click

This lightweight CSS code snippet helps you to create a custom vertical menu with submenu on click in Bootstrap projects. This vertical menu is quite compatible with Bootstrap 3/4/5  CSS and also works without it. It uses the jQuery toggle function to collapse the submenu on the click event.

How to Create Bootstrap Vertical Menu with Submenu

1. Load the jQuery and Bootstrap CSS in the head tag of your HTML page. Basically, Bootstrap CSS is optional, the menu works well without it. Anyhow, the menu uses the Bootstrap color classes.

   <!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After that, create the HTML nav element and arrange navigation links in unordered list. Use the nested list to make the submenus that will open on click.

<nav class='animated bounceInDown bg-dark'>
	<ul>
		<li><a href='#profile'>Profile</a></li>
		<li><a href='#message'>Messages</a></li>
		<li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
			<ul>
				<li><a href='#settings'>Account</a></li>
				<li><a href='#settings'>Profile</a></li>
				<li><a href='#settings'>Secruity & Privacy</a></li>
				<li><a href='#settings'>Password</a></li>
				<li><a href='#settings'>Notification</a></li>
			</ul>
		</li>
		<li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
			<ul>
				<li><a href='#settings'>FAQ's</a></li>
				<li><a href='#settings'>Submit a Ticket</a></li>
				<li><a href='#settings'>Network Status</a></li>
			</ul>
		</li>
		<li><a href='#message'>Logout</a></li>
	</ul>
</nav>

3. Now, style the menu by adding the following CSS styles into your project.

nav {
	position: relative;
	margin: 50px;
	width: 360px;
    background: 
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
  /* Sub Menu */
}
nav ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
}
nav ul li a:hover {
	background: #1d4f71;
	color: #fff;
}
nav ul li a .fa {
	width: 16px;
	text-align: center;
	margin-right: 5px;
	float:right;
}
nav ul ul {
	background: rgba(0, 0, 0, 0.2);
}
nav ul li ul li a {
	
	border-left: 4px solid transparent;
	padding: 10px 20px;
}
nav ul li ul li a:hover {

	border-left: 4px solid #3498db;
}

4. Finally, add the following jQuery function that toggles the sub-menu on the click event.

<script>
      $('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
	$(this).parent(".sub-menu").children("ul").slideToggle("100");
	$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
 </script>

That’s all! hopefully, you have successfully created vertical menu with submenu on click for Bootstrap 3/4/5. If you have any questions or suggestions let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.