Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu parts.

The HC MobileNav slides out from the left or proper facet of the webpage when toggled and overlaps (or expands) submenus when a guardian menu is opened.

bootstrap sidebar menu with submenu collapse, multi level sidebar menu css, multi level sidebar menu jquery, multi level dropdown menuresponsive

How to make use of it:

Create a multi-level menu from a nested nav list.

<nav id="main-nav">

  <ul class="first-nav">
    <li class="cryptocurrency">
      <a href="#">Cryptocurrency</a>
        <li><a href="#">Bitcoin</a></li>
        <li><a href="#">Ethereum</a></li>
        <li><a href="#">NEO</a></li>
        <li><a href="#">ZCash</a></li>
        <li><a href="#">Dogecoin</a></li>

  <ul class="second-nav">
    <li class="devices">
        <li class="mobile">
          <a href="#">Mobile Phones</a>
            <li><a href="#">Super Smart Phone</a></li>
            <li><a href="#">Thin Magic Mobile</a></li>
            <li><a href="#">Performance Crusher</a></li>
            <li><a href="#">Futuristic Experience</a></li>
        <li class="television">
          <a href="#">Televisions</a>
            <li><a href="#">Flat Superscreen</a></li>
            <li><a href="#">Gigantic LED</a></li>
            <li><a href="#">Power Eater</a></li>
            <li><a href="#"></a><a href="#!">3D</a> Experience</li>
            <li><a href="#">Classic Comfort</a></li>
        <li class="camera">
          <a href="#">Cameras</a>
            <li><a href="#">Smart Shot</a></li>
            <li><a href="#">Power Shooter</a></li>
            <li><a href="#">Easy Photo Maker</a></li>
            <li><a href="#">Super Pixel</a></li>
    <li class="magazines">
      <a href="#">Magazines</a>
        <li><a href="#">National Geographic</a></li>
        <li><a href="#">Scientific American</a></li>
        <li><a href="#">The Spectator</a></li>
        <li><a href="#">The Rambler</a></li>
        <li><a href="#">Physics World</a></li>
        <li><a href="#">The New Scientist</a></li>
    <li class="store">
      <a href="#">Store</a>
          <a href="#">Clothes</a>
              <a href="#">Women's Clothing</a>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
              <a href="#">Men's Clothing</a>
                <li><a href="#">Shirts</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
          <a href="#">Jewelry</a>
          <a href="#">Music</a>
          <a href="#">Grocery</a>
    <li class="collections"><a href="#">Collections</a></li>
    <li class="credits"><a href="#">Credits</a></li>


Load the latest version of the jQuery library (OPTIONAL) and the hc-offcanvas-nav plugin’s files in the HTML.

<link href="/path/to/dist/hc-offcanvas-nav.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/hc-offcanvas-nav.js"></script>

Initialize the jQuery HC-MobileNav plugin and achieved it.


Specify the display screen width at which breakpoint the plugin hides the common navigation.

  disableAt: 1024

Customize the textual content for the shut/again labels.

  insertClose: true,
  insertBack: true,
  labelClose: 'Close',
  labelBack: 'Back',
  levelTitleAsBack: true

Push the principle content material to the opposite facet when the HC MobileNav is toggled.

  pushContent: true // default false

Set the route of the HC MobileNav. Possible values: ‘left’ (default), ‘proper’, ‘prime’ and ‘backside’

  position: 'right'

More customization choices for the HC MobileNav.


  // width & height
  width: 280,
  height: 'auto',

  // enable swipe gestures
  swipeGestures: true,

  // initialize the menu in expanded mode
  expanded: false

  // overlap / expand / none
  levelOpen: 'overlap', 

  // in pixels
  levelSpacing: 40,

  // shows titles for submenus
  levelTitles: false,

  // close sub levels when the nav closes
  closeOpenLevels: true,

  // clear active levels when the nav closes
  closeActiveLevel: false,

  // the title of the first level
  navTitle: null,

  // additional CSS class(es)
  navClass: '',

  // disable body scroll 
  disableBody: true,

  // close the nav on click on
  closeOnClick: true,

  // {custom} toggle element
  customToggle: null,

  // prepend or append the menu to body
  bodyInsert: 'prepend',

  // should unique menus and their objects lessons be preserved or excluded.
  keepClasses: true,

  // take away unique menu from the DOM
  removeOriginalNav: false

  // allow RTL mode
  rtl: false

API strategies.

// open the menu;

// open a selected sub-menu, index);

// shut the menu

// examine if the menu is opened

// return the present choices

// update options

// update the nav DOM

// replace the choices and the DOM
instance.update(, true);


instance.on('close', function(event, settings) 
  // on close

instance.on('close.once', function(event, settings) 
  // on close only as soon as

instance.on('close.level', function(event, settings) );

instance.on('open', function(event, settings) {
  // on open

instance.on('open.level', function(event, settings) );

Multi-Level Side Menu CSS, MediaQuery, jQuery Side Panel Menu Plugin with Demo

See Demo And Download

Official Website(somewebmedia): Click Here

This superior jQuery/javascript plugin is developed by somewebmedia. For extra Advanced Usage, please go to the official website.