### PNPM Installation

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Install hc-offcanvas-nav using PNPM.

```bash
pnpm add hc-offcanvas-nav
```

--------------------------------

### HTML Structure for Navigation

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Example HTML structure for the navigation menu.

```html
<nav id="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li>
      <a href="/services">Services</a>
      <ul>
        <li><a href="/services/web">Web Design</a></li>
        <li><a href="/services/dev">Development</a></li>
        <li><a href="/services/seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

--------------------------------

### Full-Featured Configuration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

An example of a comprehensive hcOffcanvasNav configuration with many options.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  width: 300,
  position: 'left',
  disableAt: 1024,
  pushContent: '.page-wrapper',
  navTitle: 'Navigation',
  levelTitles: true,
  levelOpen: 'overlap',
  levelSpacing: 40,
  closeOnClick: true,
  closeOnEsc: true,
  swipeGestures: true,
  customToggle: '.hamburger-button',
  activeToggleClass: 'menu-open',
  ariaLabels: {
    open: 'Open Navigation',
    close: 'Close Navigation',
    submenu: 'Submenu'
  }
});
```

--------------------------------

### Yarn Installation

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Install hc-offcanvas-nav using Yarn.

```bash
yarn add hc-offcanvas-nav
```

--------------------------------

### Update to Latest Version

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Command to install the latest version of hc-offcanvas-nav.

```bash
npm install --save hc-offcanvas-nav@latest
```

--------------------------------

### Minimal Setup

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Initialize hcOffcanvasNav with minimal configuration, using all default options.

```javascript
const nav = new hcOffcanvasNav('#main-nav');
// Uses all defaults
```

--------------------------------

### Vite Integration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Example of importing and initializing hcOffcanvasNav within a Vite build.

```javascript
// main.js
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

const nav = new hcOffcanvasNav('#main-nav');
```

--------------------------------

### React Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Demonstrates how to integrate hc-offcanvas-nav within a React component using `useEffect` and `useRef` for initialization and control.

```jsx
import { useEffect, useRef } from 'react';
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

export function Navigation() {
  const navRef = useRef(null);
  const instanceRef = useRef(null);

  useEffect(() => {
    if (navRef.current) {
      instanceRef.current = new hcOffcanvasNav(navRef.current, {
        position: 'left',
        disableAt: 1024
      });
    }

    return () => {
      // Cleanup if needed
    };
  }, []);

  const handleToggle = () => {
    instanceRef.current?.toggle();
  };

  return (
    <>
      <nav id="main-nav" ref={navRef}>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
      <button onClick={handleToggle}>Menu</button>
    </>
  );
}
```

--------------------------------

### Include JavaScript

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Include the hc-offcanvas-nav JavaScript file.

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

--------------------------------

### Example for getSettings()

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Example for getSettings().

```javascript
const nav = new hcOffcanvasNav('#nav', { width: 280 });
const settings = nav.getSettings();
console.log(settings.width);      // 280
console.log(settings.position);   // 'left'
```

--------------------------------

### Webpack Integration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Example of importing and initializing hcOffcanvasNav within a Webpack build.

```javascript
// main.js
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left'
});
```

--------------------------------

### Angular Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

An Angular component demonstrating the integration of hc-offcanvas-nav, using `@ViewChild` and `AfterViewInit` for DOM access and initialization.

```typescript
// component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

@Component({
  selector: 'app-navigation',
  template: `
    <nav #navRef id="main-nav">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <button (click)="toggleNav()">Menu</button>
  `
})
export class NavigationComponent implements AfterViewInit {
  @ViewChild('navRef') navRef!: ElementRef;
  nav: any;

  ngAfterViewInit() {
    this.nav = new hcOffcanvasNav(this.navRef.nativeElement, {
      position: 'left'
    });
  }

  toggleNav() {
    this.nav?.toggle();
  }
}
```

--------------------------------

### Vue Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Shows how to use hc-offcanvas-nav in a Vue.js application with the Composition API, utilizing `ref` and `onMounted`.

```vue
<template>
  <nav id="main-nav" ref="navRef">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
  <button @click="toggleNav">Menu</button>
</template>

<script>
import { ref, onMounted } from 'vue';
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

export default {
  setup() {
    const navRef = ref(null);
    let nav = null;

    onMounted(() => {
      if (navRef.value) {
        nav = new hcOffcanvasNav(navRef.value, {
          position: 'left'
        });
      }
    });

    const toggleNav = () => {
      nav?.toggle();
    };

    return { navRef, toggleNav };
  }
};
</script>
```

--------------------------------

### Direct Download (CSS and JS)

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Include hc-offcanvas-nav via direct download using script and link tags.

```html
<link rel="stylesheet" href="https://unpkg.com/hc-offcanvas-nav/dist/hc-offcanvas-nav.css">
<script src="https://unpkg.com/hc-offcanvas-nav/dist/hc-offcanvas-nav.js"></script>
```

--------------------------------

### Include CSS

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Include the hc-offcanvas-nav CSS file in the HTML head.

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

--------------------------------

### Get Latest Version

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Command to check the latest version of hc-offcanvas-nav available on npm.

```bash
npm view hc-offcanvas-nav version
```

--------------------------------

### Get a copy of current configuration settings.

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Get a copy of current configuration settings.

```javascript
const settings = nav.getSettings();
console.log(settings.position);
```

--------------------------------

### Include CSS File

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Demonstrates how to include the CSS file either directly in HTML or via JavaScript import.

```html
<!-- CSS before JS -->
<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
<script src="/path/to/hc-offcanvas-nav.js"></script>
```

```javascript
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';
```

--------------------------------

### Dynamic Menu Updates with hc-offcanvas-nav

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Provides an example of how to dynamically add menu items to the navigation and then refresh the instance to reflect these changes.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {});

// Add menu item
const newItem = document.createElement('li');
newItem.innerHTML = '<a href="/new-page">New Page</a>';
document.querySelector('#main-nav ul').appendChild(newItem);

// Refresh nav
nav.update(true);
```

--------------------------------

### Basic Initialization

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Initialize the hcOffcanvasNav with a selector and basic options.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left',
  disableAt: 1024
});
```

--------------------------------

### AMD (RequireJS) Initialization

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Initialize hcOffcanvasNav using AMD with RequireJS.

```javascript
require.config({
  paths: {
    'hc-offcanvas-nav': '/path/to/hc-offcanvas-nav'
  }
});

require(['hc-offcanvas-nav'], function(hcOffcanvasNav) {
  const nav = new hcOffcanvasNav('#main-nav', {
    position: 'left'
  });
});
```

--------------------------------

### Complete Configuration Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

A comprehensive example showcasing all available configuration options for initializing hcOffcanvasNav.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  // Layout
  width: 280,
  height: 'auto',
  position: 'left',
  
  // Levels
  levelOpen: 'overlap',
  levelSpacing: 40,
  levelTitles: true,
  levelTitleAsBack: true,
  
  // Interaction
  closeOnClick: true,
  closeOnEsc: true,
  swipeGestures: true,
  closeOpenLevels: true,
  closeActiveLevel: false,
  
  // Toggle button
  customToggle: '.hamburger',
  activeToggleClass: 'is-active',
  insertClose: true,
  labelClose: '',
  insertBack: true,
  labelBack: 'Back',
  
  // Body & content
  disableBody: true,
  pushContent: '#main-content',
  bodyInsert: 'prepend',
  
  // Display
  navTitle: 'Menu',
  navClass: 'main-nav',
  keepClasses: true,
  removeOriginalNav: false,
  
  // Responsive
  rtl: false,
  disableAt: 1024,
  expanded: false,
  
  // Accessibility
  ariaLabels: {
    open: 'Open Navigation',
    close: 'Close Navigation',
    submenu: 'Submenu'
  }
});
```

--------------------------------

### Next.js Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Illustrates using hc-offcanvas-nav in a Next.js application, employing dynamic imports to handle server-side rendering (SSR) compatibility.

```tsx
// pages/index.tsx
import { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

let hcOffcanvasNav: any;

export default function Home() {
  const navRef = useRef<HTMLElement>(null);
  const navInstance = useRef<any>(null);

  useEffect(() => {
    // Dynamic import to avoid SSR issues
    import('hc-offcanvas-nav').then((module) => {
      hcOffcanvasNav = module.default;

      if (navRef.current) {
        navInstance.current = new hcOffcanvasNav(navRef.current, {
          position: 'left'
        });
      }
    });
  }, []);

  return (
    <nav id="main-nav" ref={navRef}>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
    </nav>
  );
}
```

--------------------------------

### Position Usage Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/types.md

Shows how to configure the navigation position.

```javascript
// Left position (default)
new hcOffcanvasNav('#nav', { position: 'left' });

// Right position
new hcOffcanvasNav('#nav', { position: 'right' });

// Top position
new hcOffcanvasNav('#nav', { position: 'top', height: 300 });

// Bottom position
new hcOffcanvasNav('#nav', { position: 'bottom', height: 250 });
```

--------------------------------

### Responsive Updates with hc-offcanvas-nav

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Explains how to configure hc-offcanvas-nav for responsive behavior using `disableAt` and how to dynamically update its properties (e.g., width) based on window size changes.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  disableAt: 1024
});

// Update on resize
window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    nav.update({ width: 250 });  // Narrower on smaller screens
  }
});
```

--------------------------------

### Browser Global Initialization

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Initialize hcOffcanvasNav using a script tag in the browser.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
</head>
<body>
  <nav id="main-nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>

  <script src="/path/to/hc-offcanvas-nav.js"></script>
  <script>
    const nav = new hcOffcanvasNav('#main-nav', {
      position: 'left'
    });
  </script>
</body>
</html>
```

--------------------------------

### Load jQuery Before Plugin

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Shows the correct order for including jQuery and the hcOffcanvasNav JavaScript file.

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/path/to/hc-offcanvas-nav.js"></script>
```

--------------------------------

### ES Modules Import

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Import hcOffcanvasNav and its CSS using ES Modules.

```javascript
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left',
  width: 280
});
```

--------------------------------

### jQuery Plugin Initialization

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Initialize hcOffcanvasNav as a jQuery plugin.

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
<script src="/path/to/hc-offcanvas-nav.js"></script>

<script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcOffcanvasNav({
      position: 'left',
      disableAt: 1024
    });
  });
</script>
```

--------------------------------

### open Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

Example of how to use the 'open' event listener.

```javascript
nav.on('open', (e, settings) => {
  console.log('Nav is now open');
  console.log('Position:', settings.position);
  
  // Track analytics
  gtag('event', 'nav_opened', { position: settings.position });
});
```

--------------------------------

### Error Handling Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Shows examples of potential errors or invalid operations and how the navigation might respond, such as logging warnings or returning false.

```javascript
// Invalid level/index - logs warning
nav.open(10, 5);  // Warning if level doesn't exist

// Invalid selector - returns false in constructor
const nav = new hcOffcanvasNav('.nonexistent');  // Returns false

// Check if nav was created
if (!nav) {
  console.error('Navigation not initialized');
}
```

--------------------------------

### SizeValue Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/types.md

Illustrates various ways to specify size values.

```javascript
// Pixel sizes
{ width: 280 }           // 280 pixels
{ height: 400 }          // 400 pixels

// Percentage
{ width: '100%' }        // Full width
{ height: '50%' }        // Half height

// Viewport units
{ width: '100vw' }       // Full viewport width
{ height: '100vh' }      // Full viewport height

// Other CSS units
{ width: '20em' }        // 20 × font-size
{ height: '30rem' }      // 30 × root font-size
{ width: '100pt' }       // Points
{ height: '2in' }        // Inches

// Special values
{ height: 'auto' }       // Content-based height
```

--------------------------------

### Mobile-First Configuration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Configure hcOffcanvasNav for a mobile-first approach, disabling it above a certain breakpoint.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left',
  width: 280,
  disableAt: 1024,      // Hide offcanvas above 1024px
  levelTitles: true,
  navTitle: 'Menu'
});
```

--------------------------------

### ElementSelector Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/types.md

Demonstrates how to use different ElementSelector types.

```javascript
// String selector
new hcOffcanvasNav('#main-nav', {});

// DOM element
const el = document.getElementById('main-nav');
new hcOffcanvasNav(el, {});

// NodeList
const navs = document.querySelectorAll('.nav-menu');
new hcOffcanvasNav(navs, {});

// jQuery
$('#main-nav').hcOffcanvasNav({});
```

--------------------------------

### Event Handling with hc-offcanvas-nav

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Shows how to listen for various events emitted by hc-offcanvas-nav, such as 'open', 'close', and 'open.level', and how to add/remove body classes accordingly.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {});

// Listen for open
nav.on('open', (e, settings) => {
  console.log('Nav opened');
  document.body.classList.add('nav-open');
});

// Listen for close
nav.on('close', (e, settings) => {
  console.log('Nav closed');
  document.body.classList.remove('nav-open');
});

// Listen for level changes
nav.on('open.level', (e, settings) => {
  console.log(`Level ${e.data.currentLevel} opened`);
});
```

--------------------------------

### CommonJS Import

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Import hcOffcanvasNav using CommonJS for Node.js environments.

```javascript
const hcOffcanvasNav = require('hc-offcanvas-nav');

const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left',
  width: 280
});
```

--------------------------------

### Check jQuery Loading

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Verifies if the jQuery library is loaded before attempting to use the jQuery plugin.

```javascript
// Check if jQuery is loaded
console.log(typeof window.jQuery);  // Should be 'function'
```

--------------------------------

### Usage Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Examples of how to import and instantiate hcOffcanvasNav in different module systems and environments.

```javascript
// ES Modules
import hcOffcanvasNav from 'hc-offcanvas-nav';

// CommonJS
const hcOffcanvasNav = require('hc-offcanvas-nav');

// Browser global
const hcOffcanvasNav = window.hcOffcanvasNav;

// Constructor
const nav = new hcOffcanvasNav('#menu', { position: 'left' });
```

--------------------------------

### Event Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Examples of how to use event listeners for various navigation events.

```javascript
// change nav open position after each close
Nav.on( 'close', function ( e, settings ) {
  Nav.update( {
    position: settings.position === 'left' ? 'right' : 'left',
  } );
} );

// will change nav open position only once
Nav.on( 'close.once', function ( e, settings ) {
  Nav.update( {
    position: settings.position === 'left' ? 'right' : 'left',
  } );
} );

Nav.on( 'open.level', ( e, settings ) => {
  localStorage.setItem( 'NavLevel', e.data.currentLevel );
  localStorage.setItem( 'NavIndex', e.data.currentIndex );
} );

Nav.on( 'close.level', ( e, settings ) => {
  localStorage.setItem( 'NavLevel', e.data.currentLevel );
  localStorage.setItem( 'NavIndex', e.data.currentIndex );
} );

Nav.on( 'toggle', ( e, settings ) => {
  if ( e.data.action == 'open' ) {
    // do something when `open` action is triggered
  }
} );
```

--------------------------------

### toggle Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

Example of how to use the 'toggle' event listener.

```javascript
nav.on('toggle', (e, settings) => {
  console.log('Toggle triggered:', e.data.action);
  
  if (e.data.action === 'open') {
    console.log('Nav is opening');
    // Show overlay, disable other interactions
  }
  else {
    console.log('Nav is closing');
    // Hide overlay, re-enable interactions
  }
});

// Fires immediately on any toggle
nav.toggle();
```

--------------------------------

### Check CSS Loading

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Verifies if the CSS for the offcanvas navigation is correctly loaded by checking computed styles.

```javascript
// Check if CSS is loaded
const style = window.getComputedStyle(
  document.querySelector('.hc-offcanvas-nav')
);
console.log('Display:', style.display);  // Should be 'block'
console.log('Position:', style.position); // Should be 'fixed'
```

--------------------------------

### Webpack/Bundler Integration Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Example of how to import the library and its CSS using modern bundlers.

```javascript
// Webpack / Rollup / Parcel
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

// Or with SCSS
import 'hc-offcanvas-nav/src/scss/hc-offcanvas-nav.scss';
```

--------------------------------

### Open Level Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/errors-and-troubleshooting.md

Example demonstrating how to safely call the `.open()` method with level and index, including a fallback mechanism.

```javascript
// Menu has 2 items at level 1
// Trying to open level 1, index 5 (doesn't exist)
nav.open(1, 5);  // Warning: level 1 doesn't have index 5

// Menu level structure:
// Level 0: root (always exists)
// Level 1: submenus of root items (indices 0-1)
// Level 2: sub-submenus (variable indices)
```

```javascript
// Safe: open existing level
const maxIndex = 1; // For 2 items
if (index <= maxIndex) {
  nav.open(1, index);
}

// Or wrap in try-catch-like pattern
const openOrDefault = (level, index) => {
  // Only open if valid
  const $checkbox = document.querySelector(`#hc-nav-${level}-${index}`);
  if ($checkbox) {
    nav.open(level, index);
  }
  else {
    console.warn(`Invalid level/index: ${level}/${index}`);
    nav.open(); // Open root level instead
  }
};
```

--------------------------------

### Programmatic Control of hc-offcanvas-nav

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Demonstrates how to programmatically control the navigation's state (checking if open, toggling, opening specific levels) and how to attach event listeners to control elements.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {});

// Check state
if (nav.isOpen()) {
  console.log('Navigation is open');
}

// Programmatic control
document.querySelector('.menu-button').addEventListener('click', () => {
  nav.toggle();
});

// Specific submenu
nav.open(1, 0);  // Open level 1, index 0
nav.close();
```

--------------------------------

### Wait for DOM Ready

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Ensures the navigation constructor is called only after the DOM is fully loaded, using either vanilla JavaScript or jQuery.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const nav = new hcOffcanvasNav('#main-nav', {});
});
```

```javascript
// Or with jQuery
jQuery(document).ready(function() {
  jQuery('#main-nav').hcOffcanvasNav({});
});
```

--------------------------------

### close Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

Example of how to use the 'close' event listener.

```javascript
nav.on('close', (e, settings) => {
  console.log('Nav is now closed');
  
  // Reset state
  document.body.classList.remove('menu-active');
  
  // Track analytics
  gtag('event', 'nav_closed');
});
```

--------------------------------

### Top Menu Bar Configuration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Configure hcOffcanvasNav to function as a top menu bar, with no submenu navigation.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  position: 'top',
  height: 300,
  levelOpen: 'none'    // No submenu navigation
});
```

--------------------------------

### Right-Side Drawer Configuration

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Configure hcOffcanvasNav to appear on the right side with an expanding level open behavior.

```javascript
const nav = new hcOffcanvasNav('#main-nav', {
  position: 'right',
  width: 320,
  levelOpen: 'expand'
});
```

--------------------------------

### Install

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/README.md

Install the hc-offcanvas-nav package using npm.

```bash
npm install --save hc-offcanvas-nav
```

--------------------------------

### open.level Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

An example of how to listen for the 'open.level' event and log information about the opened submenu level and index. It also demonstrates saving data to localStorage and updating a breadcrumb.

```javascript
nav.on('open.level', (e, settings) => {
  const { currentLevel, currentIndex } = e.data;
  console.log(`Level ${currentLevel}, Index ${currentIndex} opened`);
  
  // Remember open level for analytics
  localStorage.setItem('lastOpenLevel', currentLevel);
  localStorage.setItem('lastOpenIndex', currentIndex);
  
  // Track breadcrumb
  updateBreadcrumb(currentLevel);
});

// Opens level 1, index 0
nav.open(1, 0);
```

--------------------------------

### Configuration with Types

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/types.md

Example of configuring the hcOffcanvasNav component with TypeScript types for options.

```typescript
// Typed configuration
const options: OffcanvasNavOptions = {
  position: 'left',
  width: 280,
  height: 'auto',
  levelOpen: 'overlap',
  levelSpacing: 40,
  navTitle: 'Menu',
  ariaLabels: {
    open: 'Открыть меню',
    close: 'Закрыть меню',
    submenu: 'Подменю'
  }
};

const nav = new hcOffcanvasNav('#main-nav', options);
```

--------------------------------

### jQuery Plugin Usage

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Examples of initializing the hcOffcanvasNav jQuery plugin, getting an instance, and calling methods.

```javascript
// Initialize
$('#menu').hcOffcanvasNav({ position: 'left' });

// Get instance
const nav = $('#menu').data('hcOffcanvasNav');

// Call methods
nav.open();
nav.close();
```

--------------------------------

### close.once Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

Example of using the 'close.once' event listener.

```javascript
// Initialize nav and wait for first close
nav.on('close.once', (e, settings) => {
  console.log('Nav closed for the first time');
  // This listener fires once and removes itself
});

nav.open();
nav.close(); // Fires close.once

nav.open();
nav.close(); // Does NOT fire close.once again
```

--------------------------------

### Styling System - printStyle() Helper

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Example of using the printStyle() helper to inject dynamic styles.

```javascript
const Styles = Helpers.printStyle( `hc-offcanvas-${navCount}-style` );

// Add styles
Styles.add( selector, declarations, mediaQuery );

// Insert into page
Styles.insert();

// Reset styles
Styles.reset();
```

--------------------------------

### Overview Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

Example of how data attributes can be used on menu elements in the original HTML to control navigation behavior, styling, and initialization state.

```html
<nav id="main-nav">
  <ul>
    <li data-nav-highlight>
      <a href="#">Home</a>
    </li>
    <li data-nav-active>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

--------------------------------

### Element Methods Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Demonstrates methods attached to the navigation element created by the library.

```javascript
// Created navigation element with methods
const nav = new hcOffcanvasNav('#menu');

// Methods attached to element
nav.open()           // Function
nav.close()          // Function
nav.toggle()         // Function
nav.isOpen()         // Function
nav.getSettings()    // Function
nav.update()         // Function
nav.on()             // Function
nav.off()            // Function

// Element properties
nav.tagName          // 'NAV'
nav.id               // 'hc-nav-1' (auto-generated)
nav.className        // 'hc-offcanvas-nav ...'

// DOM structure
nav.querySelector('.nav-container')    // Main container
nav.querySelector('.nav-wrapper')      // Wrapper for level
nav.querySelector('.nav-content')      // Content wrapper
```

--------------------------------

### close.level Event Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

An example of how to listen for the 'close.level' event, logging the transition between levels and demonstrating breadcrumb updates and navigation history saving.

```javascript
nav.on('close.level', (e, settings) => {
  const { previousLevel, currentLevel, currentIndex } = e.data;
  console.log(`Closed level ${previousLevel}, back to level ${currentLevel}`);
  
  // Track breadcrumb state
  updateBreadcrumb(currentLevel);
  
  // Save navigation history
  saveNavHistory({
    closedLevel: previousLevel,
    currentLevel: currentLevel
  });
});

// Going back from level 2 to level 1
nav.on('close.level', (e) => {
  if (e.data.previousLevel === 2) {
    console.log('Returned from level 2 submenu');
  }
});
```

--------------------------------

### update() Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Provides examples of using the update() method to modify navigation settings, refresh the DOM, or both.

```javascript
nav.update({ width: 300, position: 'right' });
nav.update(true); // Refresh DOM only
nav.update({ disableAt: 1024 }, true); // Update settings and DOM
```

--------------------------------

### Settings Immutability Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/README.md

Demonstrates how to correctly update settings and the immutability of `getSettings()`.

```javascript
const settings = nav.getSettings();
settings.width = 500;                // Doesn't change nav

nav.update({ width: 500 });          // Correct way
```

--------------------------------

### Event Data Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/README.md

Example of how to access event data.

```javascript
nav.on('open.level', (e, settings) => {
  console.log(e.data.currentLevel);   // Level number
  console.log(e.data.currentIndex);   // Index within level
});
```

--------------------------------

### Vanilla JS Usage

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Example of initializing HC Off-canvas Nav with Vanilla JavaScript.

```javascript
document.addEventListener( 'DOMContentLoaded', function () {
  var Nav = new hcOffcanvasNav( '#main-nav', {
    disableAt: 1024,
    customToggle: '.toggle',
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true,
  } );
} );
```

--------------------------------

### on() Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Shows how to attach an event listener to the navigation for the 'open' event.

```javascript
nav.on('open', (event, settings) => {
  console.log('Nav opened');
});
```

--------------------------------

### getSettings() Method

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Getting current settings of the HC Off-canvas Nav instance.

```javascript
var currentSettings = Nav.getSettings();
```

--------------------------------

### Constructor Initialization

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Example of initializing the hcOffcanvasNav with different types of selectors and options.

```javascript
new hcOffcanvasNav(selector, {
  width: 280,
  position: 'left',
  disableAt: false
})
```

```javascript
// Initialize with selector string
const nav = new hcOffcanvasNav('#main-nav', {
  width: 280,
  position: 'left',
  levelTitles: true
});

// Initialize with DOM element
const navEl = document.getElementById('main-nav');
const nav = new hcOffcanvasNav(navEl, { position: 'left' });

// Initialize multiple elements
const navs = new hcOffcanvasNav('.nav-menu', { position: 'right' });
// returns array if multiple elements match

// jQuery plugin usage
$('#main-nav').hcOffcanvasNav({
  position: 'left',
  disableAt: 1024
});
```

--------------------------------

### Level Spacing Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

Pixel offset for `levelOpen: 'overlap'` or text indent for `levelOpen: 'expand'`. 

```javascript
// Small offset between levels
new hcOffcanvasNav('#nav', { levelSpacing: 20 });
```

```javascript
// Large offset with clear visual separation
new hcOffcanvasNav('#nav', { levelSpacing: 60 });
```

```javascript
// Indentation for expanding layout
new hcOffcanvasNav('#nav', {
  levelOpen: 'expand',
  levelSpacing: 30
});
```

--------------------------------

### jQuery Usage

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Example of initializing HC Off-canvas Nav with jQuery.

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

--------------------------------

### Width Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

Accepts pixel integers (e.g., `280`) or CSS values (e.g., `'100%'`, `'20em'`).

```javascript
new hcOffcanvasNav('#nav', { width: 280 });       // 280px
```

```javascript
new hcOffcanvasNav('#nav', { width: '100%' });    // Full viewport width
```

```javascript
new hcOffcanvasNav('#nav', { width: 350 });       // 350px
```

--------------------------------

### Height Examples

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

Accepts pixel integers or CSS values. `'auto'` fits content height.

```javascript
new hcOffcanvasNav('#nav', { height: 'auto' });   // Content height
```

```javascript
new hcOffcanvasNav('#nav', { height: 500 });      // 500px fixed
```

```javascript
new hcOffcanvasNav('#nav', { height: '80vh' });   // 80% viewport height
```

--------------------------------

### Submenu Navigation

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Demonstrates how to open specific submenus and listen for level change events.

```javascript
const nav = new hcOffcanvasNav('#nav', {
  levelOpen: 'overlap'
});

// Open specific submenu
function openMenu(level, index) {
  nav.open(level, index);
}

// Listen for level changes
nav.on('open.level', (e) => {
  console.log(`Now viewing level ${e.data.currentLevel}`);
});

nav.on('close.level', (e) => {
  console.log(`Closed level ${e.data.previousLevel}`);
});
```

--------------------------------

### customToggle

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

Examples showing how to specify a custom element to be used as the navigation toggle button.

```javascript
// Use existing button as toggle
new hcOffcanvasNav('#nav', { 
  customToggle: '.hamburger-button'
});

// Use multiple toggles
new hcOffcanvasNav('#nav', { 
  customToggle: '.menu-toggle'
});

// Use DOM element
const toggleBtn = document.querySelector('.menu-btn');
new hcOffcanvasNav('#nav', { customToggle: toggleBtn });
```

--------------------------------

### data-nav-active Usage Example 1

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

Initialize with the 'Services' submenu open using the data-nav-active attribute.

```html
<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li data-nav-active>
      <a href="#">Services</a>
      <ul data-nav-active>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

--------------------------------

### data-nav-active Usage Example 2

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

Initialize with a specific level open using the data-nav-active attribute.

```html
<nav id="main-nav">
  <ul>
    <li>
      <a href="#">Company</a>
      <ul data-nav-active>
        <li>
          <a href="#">Team</a>
          <ul>
            <li><a href="#">Designers</a></li>
            <li><a href="#">Developers</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
```

--------------------------------

### Event-Driven Logic

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Illustrates how to listen for navigation events like 'open' and 'close' to trigger custom logic, such as tracking menu state or handling keyboard events.

```javascript
const nav = new hcOffcanvasNav('#nav');

// Track state
let menuOpen = false;

nav.on('open', () => {
  menuOpen = true;
  console.log('Menu state:', menuOpen);
});

nav.on('close', () => {
  menuOpen = false;
  console.log('Menu state:', menuOpen);
});

// Use state elsewhere
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && menuOpen) {
    nav.close();
  }
});
```

--------------------------------

### Open Method

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Examples of using the .open() method to control the navigation's state.

```javascript
nav.open();
nav.open(2, 1);
```

```javascript
// Open nav to root level
nav.open();

// Open nav and expand to level 2, index 1
nav.open(2, 1);

// Navigate level structure
// Level 0: root menu items
// Level 1, Index 0: first submenu group
// Level 2, Index 1: second nested submenu within Level 1, Index 0
```

--------------------------------

### Batch Settings Updates

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Illustrates the performance benefit of batching multiple settings updates into a single `update` call instead of making separate calls.

```javascript
// Good: One update call
nav.update({
  width: 300,
  position: 'right',
  levelSpacing: 50
});

// Avoid: Multiple update calls
nav.update({ width: 300 });
nav.update({ position: 'right' });
nav.update({ levelSpacing: 50 });
```

--------------------------------

### Dynamic Configuration Updates

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Shows how to update the navigation's configuration dynamically after initialization, including refreshing the DOM.

```javascript
const nav = new hcOffcanvasNav('#nav', { width: 280 });

// Update width
nav.update({ width: 320 });

// Update multiple settings
nav.update({
  position: 'right',
  width: 300,
  levelSpacing: 50
});

// Refresh DOM after menu changes
const newItem = document.createElement('li');
newItem.innerHTML = '<a href="/new">New</a>';
document.querySelector('#nav ul').appendChild(newItem);
nav.update(true);
```

--------------------------------

### isOpen Method

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Example of using the .isOpen() method to check the navigation's current state.

```javascript
if (nav.isOpen()) {
  // nav is open
}
```

--------------------------------

### expanded Option

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/configuration.md

Examples for initializing the navigation in either a closed or expanded (open) state using the `expanded` option.

```javascript
// Initialize closed (default)
new hcOffcanvasNav('#nav', { expanded: false });

// Initialize opened (no animation on first load)
new hcOffcanvasNav('#nav', { expanded: true });
```

--------------------------------

### Import CSS in JavaScript

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Import the hc-offcanvas-nav CSS directly in your JavaScript file.

```javascript
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';
```

--------------------------------

### Attach an event listener.

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Attach an event listener.

```javascript
nav.on('open', (e, settings) => {
  console.log('Nav opened');
});
```

--------------------------------

### Browser Environment Check

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/errors-and-troubleshooting.md

Example of how to check for a browser environment before initializing hcOffcanvasNav to avoid errors in non-browser contexts.

```javascript
if (typeof window !== 'undefined' && window.document) {
  const nav = new hcOffcanvasNav('#main-nav', {});
}
```

```javascript
// Or use dynamic import in build tools
if (typeof window !== 'undefined') {
  import('hc-offcanvas-nav').then(({ default: hcOffcanvasNav }) => {
    const nav = new hcOffcanvasNav('#main-nav', {});
  });
}
```

--------------------------------

### Check Element Existence

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/getting-started.md

Verifies if the target HTML element for the navigation exists in the DOM.

```javascript
// Check if element exists
const el = document.querySelector('#main-nav');
console.log('Element found:', !!el);  // Should be true
```

--------------------------------

### Update settings and/or refresh the navigation DOM.

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Update settings and/or refresh the navigation DOM.

```javascript
nav.update({ width: 300 });         // Update width
nav.update(true);                   // Refresh DOM
nav.update({ width: 300 }, true);   // Both
```

--------------------------------

### Chaining Notes - Don't try to chain

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Methods do not support chaining (they return undefined). Call methods sequentially.

```javascript
// ❌ Don't try to chain
nav.open().close();  // Error!

// ✅ Do this instead
nav.open();
setTimeout(() => {
  nav.close();
}, 1000);
```

--------------------------------

### Calling Methods on Multiple Instances

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

When initializing multiple elements, the constructor returns an array.

```javascript
const navs = new hcOffcanvasNav('.nav-menu', {});

if (Array.isArray(navs)) {
  navs.forEach(nav => {
    nav.open();
  });
}
```

--------------------------------

### AriaLabels Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/types.md

Example of an AriaLabels object.

```javascript
{
  open: 'Open Navigation',
  close: 'Close Navigation',
  submenu: 'Submenu Items'
}
```

--------------------------------

### ARIA Labels Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Example of ARIA labels for different languages.

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

--------------------------------

### Settings Inspection

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Demonstrates how to retrieve and inspect the current settings of the off-canvas navigation.

```javascript
const nav = new hcOffcanvasNav('#nav');
const settings = nav.getSettings();

// Check specific setting
if (settings.disableAt && window.innerWidth >= settings.disableAt) {
  console.log('Off-canvas disabled at this breakpoint');
}

// List all settings
console.table(settings);
```

--------------------------------

### getSettings() Detailed Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Illustrates accessing various settings properties from the object returned by getSettings() and performing conditional checks.

```javascript
const currentSettings = nav.getSettings();

console.log(currentSettings.width); // 280
console.log(currentSettings.position); // 'left'
console.log(currentSettings.disableAt); // 1024

// Check if specific feature is enabled
if (currentSettings.levelTitles) {
  console.log('Level titles are enabled');
}
```

--------------------------------

### Toggle the navigation between open and closed states.

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/methods-quick-reference.md

Toggle the navigation between open and closed states.

```javascript
nav.toggle();
```

--------------------------------

### Example HTML menu structure

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

An example of the HTML structure for the HC Off-canvas Nav menu.

```html
<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li>
          <a href="#">Hosting</a>
          <ul>
            <li><a href="#">Private Server</a></li>
            <li><a href="#">Managed Hosting</a></li>
          </ul>
        </li>
        <li><a href="#">Domains</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

--------------------------------

### data-nav-highlight Usage Example 1

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

Example of highlighting the current page using the data-nav-highlight attribute.

```html
<nav id="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li data-nav-highlight>
      <a href="/about">About Us</a>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

--------------------------------

### data-nav-highlight Usage Example 2

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

Example of highlighting multiple items, including a nested item, using the data-nav-highlight attribute.

```html
<nav id="main-nav">
  <ul>
    <li data-nav-highlight>
      <a href="/products">Products</a>
    </li>
    <li>
      <a href="/services">Services</a>
      <ul>
        <li data-nav-highlight>
          <a href="/services/consulting">Consulting</a>
        </li>
        <li><a href="/services/support">Support</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

--------------------------------

### Settings Object Usage

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/events.md

Demonstrates how the settings object is passed to callbacks and how to correctly update settings using the '.update()' method.

```javascript
nav.on('open', (e, settings) => {
  console.log(settings.width);        // Read current settings
  settings.width = 500;               // Modifying this has no effect
  
  nav.update({ width: 500 });         // This is the correct way
});
```

--------------------------------

### isOpen() Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/api-reference/hc-offcanvas-nav-class.md

Demonstrates how to check the current state of the navigation (open or closed) and conditionally execute logic.

```javascript
// Conditional logic based on nav state
if (nav.isOpen()) {
  console.log('Nav is open');
} else {
  console.log('Nav is closed');
}

// Open only if closed
if (!nav.isOpen()) {
  nav.open();
}
```

--------------------------------

### Dev Building with Gulp

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/README.md

Commands for building the project using Gulp. The default task compiles JS and SCSS, the 'demo' task builds demos and opens the demo page, and 'watch' monitors files for changes.

```bash
npx gulp
npx gulp watch
npx gulp --dev
```

--------------------------------

### Import & Initialize

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/README.md

Import the library and its CSS, then initialize the navigation with basic options.

```javascript
import hcOffcanvasNav from 'hc-offcanvas-nav';
import 'hc-offcanvas-nav/dist/hc-offcanvas-nav.css';

const nav = new hcOffcanvasNav('#main-nav', {
  position: 'left',
  width: 280,
  disableAt: 1024
});
```

--------------------------------

### HTML and CSS Solutions for Navigation Not Appearing

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/errors-and-troubleshooting.md

HTML and CSS examples for including the necessary stylesheet, ensuring proper menu structure, and setting z-index.

```html
<!-- 1. Include CSS -->
<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
```

```html
<!-- 2. Proper menu structure -->
<nav id="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>
```

```html
<!-- 3. Check z-index in CSS -->
<style>
  .hc-offcanvas-nav {
    z-index: 9999; /* Above other elements */
  }
</style>
```

--------------------------------

### Form Submission Example

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/data-attributes.md

An example of using data attributes within a form inside a navigation element, demonstrating how to control the closing behavior of elements.

```html
<nav id="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li data-nav-custom-content>
      <form>
        <select data-nav-close="false">
          <option>Choose category</option>
          <option>Products</option>
          <option>Services</option>
        </select>
        <button data-nav-close="true">Filter</button>
      </form>
    </li>
  </ul>
</nav>
```

--------------------------------

### CommonJS Usage

Source: https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/_autodocs/module-structure.md

Example of using hcOffcanvasNav with CommonJS.

```javascript
const hcOffcanvasNav = require('hc-offcanvas-nav');
const nav = new hcOffcanvasNav('#menu', {});
```