5+ Bootstrap Vertical Menu Examples

This post contains a total of 5+ Hand-Picked Bootstrap Vertical Menu Examples with Source Code. All these Vertical Menus are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Vertical Menu Examples

1. By Mohammad Abdul Hye Shaon

Made by Mohammad Abdul Hye Shaon. Simple Bootstrap Vertical menu. Source

bootstrap vertical menu by mohammad abdul hye shaon
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<style>
.mini-submenu{
  display:none;  
  background-color: rgba(0, 0, 0, 0);  
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 9px;  
  /*position: relative;*/
  width: 42px;

}

.mini-submenu:hover{
  cursor: pointer;
}

.mini-submenu .icon-bar {
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 22px;
  margin-top: 3px;
}

.mini-submenu .icon-bar {
  background-color: #000;
}

#slide-submenu{
  background: rgba(0, 0, 0, 0.45);
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
}
</style>
</head>
<body>
  <div class="container">


	<div class="row">
		<div class="col-sm-4 col-md-3 sidebar">
    <div class="mini-submenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
    <div class="list-group">
        <span href="#" class="list-group-item active">
            Submenu
            <span class="pull-right" id="slide-submenu">
                <i class="fa fa-times"></i>
            </span>
        </span>
        <a href="https://bootsnipp.com/snippets/featured/nav-sidebar-with-toggle-button" class="list-group-item">
            <i class="fa fa-comment-o"></i> Testing
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-search"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-user"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-envelope"></i> Lorem ipsum
        </a>
    </div>        
</div>
	</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
      <script>
$(function () {

  $('#slide-submenu').on('click', function () {
    $(this).closest('.list-group').fadeOut('slide', function () {
      $('.mini-submenu').fadeIn();
    });

  });

  $('.mini-submenu').on('click', function () {
    $(this).next('.list-group').toggle('slide');
    $('.mini-submenu').hide();
  });
});
    </script>
</body>
</html>

2. By Michael Rambeau

Made by Michael Rambeau. Responsive Bootstrap vertical menu / navigation bar. Source

bootstrap vertical menu by michael rambeau
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Bootstrap vertical menu / navigation bar</title>
  
  
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
  
<style>
/* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <div class="col-sm-9">
    Main content goes here
  </div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js'></script>
      <script>
(function() {


}).call(this);

    </script>
</body>
</html>

3. By Michael Norman

Made by Michael Norman. Vertical menu with Minimal hover effect. Source

bootstrap vertical menu by michael norman
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css'>
<style>
.dropdown-menu
{
  display: block;
  width: 20%;
  margin-left: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
}

li
{
  list-style-type: none;
}

.dropdown-toggle
{
  display: none;
}
</style>
</head>
<body>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu stay-open">
    <h6 class="dropdown-header">Syllabus</h6>
    <a class="dropdown-item" href="#">Banking</a>
    <a class="dropdown-item" href="#">Debtors</a>
    <a class="dropdown-item" href="#">Creditors</a>
    <a class="dropdown-item" href="#">CRM</a>
    <a class="dropdown-item" href="#">Diary</a>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Employees</a>
    <a class="dropdown-item" href="#">General Ledger</a>
    <a class="dropdown-item" href="#">International</a>
    <a class="dropdown-item" href="#">Reports</a>
    <a class="dropdown-item" href="#">Baggage</a>
    <a class="dropdown-item" href="#">Operations</a>
    <a class="dropdown-item" href="#">Payroll</a>
    <a class="dropdown-item" href="#">Storage</a>
  </ul>
</li>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.bundle.js'></script>

</body>
</html>

4. By Frobi

Made by Frobi. Bootstrap Vertical menu with simple animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  
<style>
@charset "UTF-8";
body {
  background: #e1e1e1;
}

.container {
  margin-top: 12px;
}
.container nav.my {
  background: white;
  padding-top: 20px;
  border-top: 6px solid #2d9efa;
}
.container nav.my ul {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: all 1s ease-in-out;
}
.container nav.my ul li a {
  display: block;
  background: white;
  color: #666;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 2px 10px 14px;
  border-left: 2px solid white;
  border-bottom: 1px solid #ddd;
}
.container nav.my ul li a i {
  font-size: 22px;
  transform: translateY(2px);
  padding-right: 4px;
}
.container nav.my ul li a:hover {
  color: #2d9efa;
  border-left: 2px solid #2d9efa;
}
.container nav.my ul li a.active {
  background: #2d9efa;
  color: white;
  border-left: 2px solid #2d9efa;
}
.container nav.my ul li a[data-toggle=collapse]:after {
  content: "οƒ˜";
  font-family: FontAwesome;
  float: right;
  padding-right: 14px;
}
.container nav.my ul li a.collapsed[data-toggle=collapse]:after {
  content: "οƒ—";
}
.container nav.my ul li ul li a {
  font-size: 14px;
  padding: 10px 20px;
}
.container nav.my ul li ul li a i {
  font-size: 18px;
  transform: translate(0px, 1px);
}
.container nav.my ul li ul li a:hover {
  background: white;
  color: #2d9efa;
  font-size: 14px;
  padding: 10px 20px;
}
.container nav.my ul li ul li a.active {
  background: #2d9efa;
  color: white;
  border-left: 2px solid #2d9efa;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-2 pl-0">
      <nav class="my">
        <ul>
          <li>
            <a href="#eins" data-toggle="collapse" class="collapsed">
              <span>
              <i class="fa fa-user-circle-o"></i>
              Profil
              </span>
            </a>
            <ul class="collapse" id="eins">
              <li>
                <a href="">
                <span>
                  <i class="fa fa-user-circle-o"></i>
                  Profil
                </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">
              <span>
              <i class="fa fa-user-circle-o"></i>
              Profil
              </span>
            </a>
          </li>
          <li>
            <a href="">
              <span>
              <i class="fa fa-file-text-o"></i>
              Anfragen
              </span>
            </a>
          </li>
          <li>
            <a href="">
              <span>
              <i class="fa fa-user-circle-o"></i>
              Profil
              </span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-md-10">
      <p>
        Inhalt
      </p>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.bundle.js'></script>
      <script>
$(document).ready(function () {

  $('a').click(function () {
    $(this).toggleClass('active');
  });

});
    </script>
</body>
</html>

5. By Oltika

Made by Oltika. Multilevel Dropdown vertical menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
.dropdown-submenu{
  position:relative;
}
.dropdown-submenu>.dropdown-menu{
  top:0;left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu{
  display:block;
}
.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;
  margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
  border-left-color:#ffffff;
}
.dropdown-submenu.pull-left{
  float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
  left:-100%;
  margin-left:10px;
  -webkit-border-radius:6px 0 6px 6px;
  -moz-border-radius:6px 0 6px 6px;
  border-radius:6px 0 6px 6px;
}
</style>
</head>
<body>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; *width: 180px;">
  <li><a href="#">Another action</a></li>
  <li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>
      <li class="dropdown-submenu"><a href="#">More..</a>
        <ul class="dropdown-menu">
        	<li><a href="#">3rd level</a></li>
        	<li><a href="#">3rd level</a></li>
        </ul>
      </li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
</ul>
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>

6. By Harun Kocaman

Made by Harun Kocaman. Vertical menu with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<style>
/*fixed footer*/
.webdoktoru{ position: fixed;left: 0;bottom: 0;width: 100%;background-color: #555;color: white;text-align: center;}.webdoktoru a{text-decoration:none; color:white;font-size:2rem;}.webdoktoru a:hover{text-decoration:none; color:gray}
.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;

  width: 220px;
  height: 100%;
  color: #e1ffff;
}
.menu-list {
top:250px; 
}
.nav-side-menu .brand {
margin-top:10%;
background-color: #bbbbd6;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
overflow: hidden;
border-radius: 25%;
background: linear-gradient(270deg, rgba(38, 111, 175, 0.1), rgba(255, 255, 255, 018), rgba(38, 111, 175, 0.38));
background-size: 500% 500%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}  
.nav-side-menu .toggle-btn {
  display: none;
}
.tasi{
  padding-top:10%;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }
  .brand {
    text-align: center !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
       
  }
  .tasi{
  padding-top:0;
}
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
body {
  margin: 0px;
  padding: 0px;
  
}
#giris {
 height:100vh;
 background-color:#33aac7;
}#nasil {
 height:100vh;
 background-color:#337ab7;
}
#eklentiler {
 height:100vh;
 background-color:#887aaa;
}
#ornekler {
 height:100vh;
 background-color:#88ccaa;
}
#ayrintilar {
 height:100vh;
 background-color:#dd7a23;
}
#digerleri {
 height:100vh;
 background-color:#887aff;
}
</style>
</head>
<body>
  <div class="webdoktoru"><a href="//web-doktoru.com">Web-Doktoru</a></div>
<div class="nav-side-menu">
  <div class="tasi">
    <div class="brand"><img src="//tecrubeliyim.com/wp-content/uploads/logoS.png" width="150"><!-- /Web-Doktoru --></div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  
        <div class="menu-list">
  
            <ul id="menu-content" class="menu-content collapse out">
                <li>
                  <a href="#giris" class="nav-link js-scroll-trigger">
                  <i class="fa fa-home fa-lg fa-fw"></i> Giriş
                  </a>
                </li>
                 <li>
                  <a href="#nasil">
                  <i class="fa fa-question-circle fa-lg fa-fw"></i> NasΔ±l
                  </a>
                </li>

                 <li>
                  <a href="#eklentiler">
                  <i class="fa fa-plug fa-lg fa-fw"></i> Eklentiler
                  </a>
                </li>
               
               <li>
                  <a href="#ornekler">
                  <i class="fa fa-briefcase fa-fw"></i> Γ–rnekler
                  </a>
                </li>
               <li>
                  <a href="#ayrintilar">
                  <i class="fa fa-sliders fa-lg fa-fw"></i> AyrΔ±ntΔ±lar
                  </a>
                </li>
               <li>
                  <a href="#digerleri">
                  <i class="fa fa-eye fa-lg"></i> Devam edin...
                  </a>
                </li>
        <!--li data-toggle="collapse" data-target="#new" class="collapsed">
                  <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="new">
                  <li>New New 1</li>
                  <li>New New 2</li>
                  <li>New New 3</li>
                </ul-->
       </ul>
     </div>
    </div>
</div></div>
<div id="giris"></div>
<div id="nasil"></div>
<div id="eklentiler"></div>
<div id="ornekler"></div>
<div id="ayrintilar"></div>
<div id="digerleri"></div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>