Responsive Admin Sidebar Menu Plugin With jQuery - sidebar-nav

File Size: 7.5 KB
Views Total: 25590
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Admin Sidebar Menu Plugin With jQuery - sidebar-nav

sidebar-nav is a jQuery (Bootstrap) plugin that lets you create a responsive, collapsible, multi-level, treeview-style sidebar navigation for your admin dashboard webpages. The sidebar nav menu will be auto collapsed into a toggleable dropdown menu on small screens (e.g. mobile devices).

How to use it:

1. Load the required Bootstrap's stylesheet and Font Awesome in the header of your webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Load jQuery library, Bootstrap's JavaScript and the jQuery sidebar-nav plugin's files in the webpage.

<link href="css/SidebarNav.min.css"rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="js/SidebarNav.min.js"></script>

3. Create the multi-level sidebar navigation following the HTML structure as follows:

<aside class="sidebar-left">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="sidebar-menu">
          <li class="header">MAIN NAVIGATION</li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-files-o"></i>
            <span>Layout Options</span>
            <span class="label label-primary pull-right">4</span>
            </a>
            <ul class="treeview-menu" style="display: none;">
              <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>
              <li class=""><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">
            <i class="fa fa-th"></i> <span>Widgets</span>
            <small class="label pull-right label-info">new</small>
            </a>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-pie-chart"></i>
            <span>Charts</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-laptop"></i>
            <span>UI Elements</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> General</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Icons</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Modals</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-edit"></i> <span>Forms</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-table"></i> <span>Tables</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
            <i class="fa fa-calendar"></i> <span>Calendar</span>
            <small class="label pull-right label-danger">3</small>
            </a>
          </li>
          <li>
            <a href="#">
            <i class="fa fa-envelope"></i> <span>Mailbox</span>
            <small class="label pull-right label-warning">12</small>
            </a>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-folder"></i> <span>Examples</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Profile</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Login</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Register</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
            <i class="fa fa-share"></i> <span>Multilevel</span>
            <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              <li>
                <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
                  <li>
                    <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                      <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                      <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
          <li class="header">LABELS</li>
          <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
          <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
          <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</aside>

4. Call the function to initialize the sidebar navigation.

$('.sidebar-menu').SidebarNav()

Change log:

2016-11-14

2016-11-11

  • JS & CSS update

This awesome jQuery plugin is developed by anarchyta. For more Advanced Usages, please check the demo page or visit the official website.