Create Stackable Multi-level Sidebar Menu

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.

Features

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

Table of Contents

How to make use of it:

Install

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

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

  $('#main-nav').hcOffcanvasNav({
    disableAt: 1024,
    customToggle: $('.toggle'),
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true
  });

});

Options

Must Read: Multi-Level Dropdown Works With Bootstrap 5

Property	Default	Type	Description
width	`280`	int/str	Width of the nav. Used for `left` and `right` positions.
height	`'auto'`	int/str	Height of the nav. Used for `top` and `bottom` positions.
disableAt	`false`	int/bool	The resolution above which is to hide the `offcanvas` menu, and show the original.
pushContent	`null`	str / Element obj	Content element (string selector or HTML Element object) that will be pushed when the navigation is open.
expanded	`false`	bool	Initialize the menu in expanded mode. It won’t push content.
position	`'left'`	str	Position on which the menu will open. Available options: `'left'`, `'right'`, `'top'` and `'bottom'`.
swipeGestures	`true`	bool	Enable open/close swipe gestures like in native apps. Works only for `left` `right` positions.
levelOpen	`'overlap'`	str	Submenu levels open effect. Available options: `'overlap'`, `'expand'`, `'none'` or `false`.
levelSpacing	`40`	int	If levels are overlapped, this is the spacing between them, if they are expanding or always open, this is the text-indent of the submenus.
levelTitles	`true`	bool	Show titles for submenus, which is the parent item name. Works only for overlapped levels.
navTitle	`null`	str / Element obj	Main navigation (first level) title. Can also be an HTML object like an image (logo).
navClass	`''`	str	Custom navigation class.
disableBody	`true`	bool	Disable body scroll when navigation is open.
closeOpenLevels	`true`	bool	Should all open sub-levels be closed when the nav closes?
closeActiveLevel	`false`	bool	Should the initially active sub-level (see `data-nav-active`) be cleared when the nav closes.
closeOnClick	`true`	bool	Close the navigation when links are clicked.
closeOnEsc	`true`	bool	Close the navigation on the `Esc` button.
customToggle	`null`	str / Element obj	Custom navigation toggle element.
activeToggleClass	`null`	str	Custom active toggle class.
insertClose	`true`	bool/int	Insert 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.
insertBack	`true`	bool/int	Insert 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	`''`	str	Label for the close button.
labelBack	`'Back'`	str	Label for the back buttons.
levelTitleAsBack	`true`	bool	Use level titles as back labels.
rtl	`false`	bool	Set the content direction to right-to-left.
bodyInsert	`'prepend'`	str	Choose to prepend or append navigation to the body.
keepClasses	`true`	bool	Should original menus and their items classes be preserved or excluded?
removeOriginalNav	`false`	bool	Remove the original menu from the DOM. Don’t use this if planning to update the nav!
ariaLabels	`{...}`	obj	Labels 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.

Events

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

Event	Description
open	Triggers each time after the nav is opened.
open.level	Triggers each time after any level is opened.
close	Triggers each time after the nav is closed.
close.once	Triggers only the first time after the nav is closed, and then it detaches itself.
close.level	Triggers each time after any level is closed.
toggle	Triggers each time the nav is triggered to be opened or closed.

Data Attributes

Attr	Accepts	HTML Element	Description
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-close	bool	`<a>`	Attached on the item links. Tells the nav if it needs to be closed on click or not.