Bootstrap Vertical Menu with Submenu on Click

Bootstrap Vertical Menu with Submenu on Click
Code Snippet:Vertical Dropdown Menu
Author: Bülent Sakarya
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 73,986
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X