Simple Sidebar is an off-the-canvas sidebar navigation template for Bootstrap created by Start Bootstrap. An easy-to-configure, easy-to-navigate sidebar template built using Bootstrap framework and jQuery library.
Basic Use
After downloading, simply edit the HTML and CSS files included in the dist directory. These are the only files you have to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.
Advanced Use
Copy the theme’s source files and go to the theme’s root directory. Run npm install and then run npm start which will open a preview of the template in your default browser, see changes to core template files, and reload the browser directly when the changes are saved. You can view the package.json file to see which scripts are included.
Must Read: Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification
How to make use of it:
1. Install the package and run the build.
# NPM $ npm i startbootstrap-simple-sidebar-With-jQuery $ npm run build
2. Import the bundled CSS into your document.
<link href="dist/css/styles.css" rel="stylesheet" />
// or import the scss @import "startbootstrap-simple-sidebar-master/src/scss/styles.scss";
3. The HTML template for the sidebar navigation to maintain all web page content inside the #page-content-wrapper.
<div class="d-flex" id="wrapper">
<!-- Sidebar-->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Heading</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action bg-light" href="#!">Dashboard</a>
<a class="list-group-item list-group-item-action bg-light" href="#!">Shortcuts</a>
<a class="list-group-item list-group-item-action bg-light" href="#!">Overview</a>
<a class="list-group-item list-group-item-action bg-light" href="#!">Events</a>
<a class="list-group-item list-group-item-action bg-light" href="#!">Profile</a>
<a class="list-group-item list-group-item-action bg-light" href="#!">Status</a>
</div>
</div>
<!-- Page Content-->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#!">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#!" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
</div>
</div>
</div>4. The jQuery script to allow the sidebar navigation.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});See Demo And Download
Official Website(StartBootstrap): Click Here
This superior jQuery/javascript plugin is developed by StartBootstrap. For extra Advanced Usage, please go to the official website.
