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.


  • Multi-level menu support
  • Endless nesting of navigation elements
  • Custom content inside menu items
  • Push/Slide DOM elements of choice
  • Touch swipe gestures
  • Different navigation positions
  • No dependencies
  • Flexible, simple markup
  • A number of exposed Options, Methods, and Events
  • 2 Themes
  • Cross-browser compatibility
  • Full ARIA keyboard support

Must Read: Responsive Sidebar Menu With SubMenu HTML CSS and JavaScript

How to make use of it:


npm install --save hc-offcanvas-nav

Including off-canvas HC navigation.

<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">

<script src="/path/to/hc-offcanvas-nav.js"></script>

In the script, including HC Off-canvas Nav, it will usually look like this:

const hcOffcanvasNav = require('hc-offcanvas-nav');
import hcOffcanvasNav from 'hc-offcanvas-nav';
@import 'hc-offcanvas-nav/src/scss/core';
@import 'hc-offcanvas-nav/src/scss/toggle';
@import 'hc-offcanvas-nav/src/scss/theme-default';

Make sure to call Nav as soon as the menu item is available in the DOM.

Vanilla JS

document.addEventListener('DOMContentLoaded', function() {

  var Nav = new hcOffcanvasNav('#main-nav', {
    disableAt: 1024,
    customToggle: '.toggle',
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true



jQuery(document).ready(function($) {

    disableAt: 1024,
    customToggle: $('.toggle'),
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true



Must Read: Multi-Level Dropdown Works With Bootstrap 5

width280int/strWidth of the nav. Used for left and right positions.
height'auto'int/strHeight of the nav. Used for top and bottom positions.
disableAtfalseint/boolThe resolution above which is to hide the offcanvas menu, and show the original.
pushContentnullstr / Element objContent element (string selector or HTML Element object) that will be pushed when the navigation is open.
expandedfalseboolInitialize the menu in expanded mode. It won’t push content.
position'left'strPosition on which the menu will open. Available options: 'left''right''top' and 'bottom'.
swipeGesturestrueboolEnable open/close swipe gestures like in native apps. Works only for left  right positions.
levelOpen'overlap'strSubmenu levels open effect. Available options: 'overlap''expand''none' or false.
levelSpacing40intIf levels are overlapped, this is the spacing between them, if they are expanding or always open, this is the text-indent of the submenus.
levelTitlestrueboolShow titles for submenus, which is the parent item name. Works only for overlapped levels.
navTitlenullstr / Element objMain navigation (first level) title. Can also be an HTML object like an image (logo).
navClass''strCustom navigation class.
disableBodytrueboolDisable body scroll when navigation is open.
closeOpenLevelstrueboolShould all open sub-levels be closed when the nav closes?
closeActiveLevelfalseboolShould the initially active sub-level (see data-nav-active) be cleared when the nav closes.
closeOnClicktrueboolClose the navigation when links are clicked.
closeOnEsctrueboolClose the navigation on the Esc button.
customTogglenullstr / Element objCustom navigation toggle element.
activeToggleClassnullstrCustom active toggle class.
insertClosetruebool/intInsert the navigation close button. You can also use an integer representing a 0-based index that will be the position of the button in the list. Negative numbers are also supported.
insertBacktruebool/intInsert back buttons to submenus. You can also use an integer representing a 0-based index that will be the position of the button in the list. Negative numbers are also supported. Works only for overlapped levels.
labelClose''strLabel for the close button.
labelBack'Back'strLabel for the back buttons.
levelTitleAsBacktrueboolUse level titles as back labels.
rtlfalseboolSet the content direction to right-to-left.
bodyInsert'prepend'strChoose to prepend or append navigation to the body.
keepClassestrueboolShould original menus and their items classes be preserved or excluded?
removeOriginalNavfalseboolRemove the original menu from the DOM. Don’t use this if planning to update the nav!
ariaLabels{...}objLabels for the ARIA attributes. If using HC Off-canvas Nav in a different language than English, you should translate all the properties. See the next section.


Must Read: Responsive Off-Canvas Navigation Menu Using CSS | Pushy

openTriggers each time after the nav is opened.
open.levelTriggers each time after any level is opened.
closeTriggers each time after the nav is closed.
close.onceTriggers only the first time after the nav is closed, and then it detaches itself.
close.levelTriggers each time after any level is closed.
toggleTriggers each time the nav is triggered to be opened or closed.

Data Attributes

AttrAcceptsHTML ElementDescription
data-nav-active<ul><li>The next time the nav opens it will open a specified sub-menu (or sub-menu whose parent <li> element has the attribute). Works with expanded option.
data-nav-highlight<li>Highlight list item.
data-nav-custom-content<li>Attached on the list of items. Will clone the item’s content as is.
data-nav-closebool<a>Attached on the item links. Tells the nav if it needs to be closed on click or not.

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…