Smartmenu Vertical with bootstrap
HTML
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/jquery.smartmenus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
<nav id="navbar-sidebar" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-sidebar-collapse" aria-expanded="false" aria-controls="navbar-sidebar-collapse">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
<a class="navbar-brand" href="#">Brand</a>
</button>
</div>
<div id="navbar-sidebar-collapse" class="navbar-collapse collapse">
<!-- start sidebar nav -->
<ul class="nav navbar-nav navbar-left sm-vertical">
<li>
<a href="#">TEST</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Dropdown <span class="caret"/>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider" />
<li class="dropdown-header">Nav header</li>
<li>
...
CSS
<style>
@media (min-width: 768px) {
#navbar-sidebar .container-fluid,
#navbar-sidebar .navbar-collapse {
padding: 0;
}
#navbar-sidebar .navbar-left {
margin-left: 0;
}
#navbar-sidebar .nav > li {
width: 100%;
}
}
</style>