HC Off-canvas Nav

To call methods on an existing instance, you must first capture the instance. In Vanilla JS, this is the object returned by the constructor. In jQuery, you can retrieve it using .data('hcOffcanvasNav').

<!-- Vanilla JS -->
var Nav = new hcOffcanvasNav();

<!-- jQuery -->
var $nav = $( '#main-nav' ).hcOffcanvasNav();
var Nav = $nav.data( 'hcOffcanvasNav' );

HC Off-canvas Nav includes two themes: default and Carbon. To use the Carbon theme, load the specific CSS file or include the corresponding SCSS files.

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

<!-- SCSS -->
@use 'hc-offcanvas-nav/src/scss/core';
@use 'hc-offcanvas-nav/src/scss/toggle';
@use 'hc-offcanvas-nav/src/scss/theme-carbon' as theme-carbon;

@include theme-carbon.styles();

You can control the behavior and appearance of the navigation menu using HTML data-* attributes on <ul>, <li>, or <a> elements.

<nav id="main-nav">
  <ul>
    <!-- Custom content cloning -->
    <li data-nav-custom-content>
      <div>Some custom content</div>
    </li>
    
    <!-- Highlighted item -->
    <li data-nav-highlight><a href="#">Home</a></li>
    
    <!-- Automatically open this sub-menu on next nav open -->
    <li data-nav-active>
      <a href="#">About</a>
      <ul data-nav-active>
        <li><a href="#">Team</a></li>
      </ul>
    </li>
    
    <!-- Prevent nav from closing when this link is clicked -->
    <li data-nav-close="false"><a href="#">Add Page</a></li>
  </ul>
</nav>

Depending on your build system, you can include the library using standard script/CSS tags, module bundlers (Webpack/Browserify), Babel, or SCSS.

<!-- Script and Css tag -->
<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
<script src="/path/to/hc-offcanvas-nav.js"></script>

<!-- Webpack/Browserify -->
const hcOffcanvasNav = require( 'hc-offcanvas-nav' );

<!-- Babel -->
import hcOffcanvasNav from 'hc-offcanvas-nav';

<!-- SCSS -->
@use 'hc-offcanvas-nav/src/scss/core';
@use 'hc-offcanvas-nav/src/scss/toggle';
@use 'hc-offcanvas-nav/src/scss/theme-default' as theme-default;

@include theme-default.styles();

To use the library, initialize it once your menu element is available in the DOM. You can use the Vanilla JS constructor or the jQuery plugin syntax.

<!-- 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,
  } );
} );

You can install the package using npm to add it to your project dependencies.

npm install --save hc-offcanvas-nav

The package uses Gulp for development tasks. You can run these via npx gulp.

• npx gulp: Compiles JS and SCSS into /dist and builds demos into /docs.
• npx gulp demo: Runs the default task and opens the demo HTML page.
• npx gulp watch: Watches source JS and SCSS files and rebuilds automatically on save.

Use the --dev flag to prevent minification of the compiled JS and CSS.

npx gulp
npx gulp watch
npx gulp --dev

If you are using HC Off-canvas Nav in a language other than English, you should provide translated labels for the ARIA attributes via the ariaLabels option.

ariaLabels: {
  open:     'Open Menu',
  close:    'Close Menu',
  submenu:  'Submenu'
}

To create an off-canvas navigation, instantiate the HcOffcanvasNav constructor. You can pass either a DOM element or a CSS selector string as the first argument. If a string is passed, the library will attempt to find the element using document.querySelector (if it starts with #) or document.querySelectorAll (otherwise).

// Using a CSS selector
const nav = new HcOffcanvasNav('#my-nav-element', { /* options */ });

// Using a DOM element
const element = document.querySelector('.my-nav');
const nav = new HcOffcanvasNav(element, { /* options */ });

The API provides several methods to control the navigation state, settings, and event listeners.

<!-- .getSettings() -->
var currentSettings = Nav.getSettings();

<!-- .isOpen() -->
if ( Nav.isOpen() ) {
  // do something
}

<!-- .update(options, updateDOM) -->
// Update specific settings
Nav.update( {
  disableAt: 1024,
  navTitle: 'All pages',
} );

// Update nav DOM only
Nav.update( true );

// Update both settings and nav DOM
Nav.update(
  {
    disableAt: 1024,
    navTitle: 'All pages',
  },
  true
);

<!-- .open( level, index ) -->
Nav.open(); // Opens the nav
Nav.open( 2, 1 ); // Opens a specific sub menu at level 2, index 1

<!-- .close() -->
Nav.close();

<!-- .toggle() -->
Nav.toggle();

<!-- .on( eventName, cb ) -->
Nav.on( 'close', function () {
  // do something on close
} );

<!-- .off( eventName, cb ) -->
Nav.off( 'close', onCloseFunction);
Nav.off( 'close' );