### JavaScript Setup

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-bottom.html

Include the necessary JavaScript files for Bootstrap, jQuery, SmartMenus, and the SmartMenus Bootstrap Addon. The order of inclusion is important.

```APIDOC
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
```

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

### SmartMenus HTML Structure and Initialization

Source: https://context7.com/vadikom/smartmenus/llms.txt

This example shows the required HTML structure for a SmartMenus navigation, including CSS and JavaScript includes, and basic initialization.

```html
<!-- Required CSS -->
<link href="css/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

<!-- Menu HTML structure -->
<nav id="main-nav">
  <ul id="main-menu" class="sm sm-blue">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a>
      <ul>
        <li><a href="/about/team/">Our Team</a></li>
        <li><a href="/about/history/">History</a></li>
        <li><a href="/about/partners/">Partners</a>
          <ul>
            <li><a href="/about/partners/company-a/">Company A</a></li>
            <li><a href="/about/partners/company-b/">Company B</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="/services/">Services</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

<!-- Required JavaScript -->
<script src="libs/jquery/jquery.js"></script>
<script src="jquery.smartmenus.js"></script>
<script>
  $(function() {
    $('#main-menu').smartmenus();
  });
</script>
```

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

### CommonJS / npm Usage of SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Load and initialize SmartMenus using CommonJS (npm/Browserify/Webpack). Ensure jQuery, smartmenus, and smartmenus-keyboard are installed as dependencies.

```javascript
// package.json dependencies: jquery, smartmenus, smartmenus-keyboard
var $ = require('jquery');
require('smartmenus');
require('smartmenus-keyboard');

$(function() {
  $('#main-menu').smartmenus({
    showTimeout: 100
  });
});
```

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

### CSS Transition Animation Example for SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Configure SmartMenus to use CSS transitions for animations by setting durations to 0 and controlling opacity via JavaScript and CSS.

```javascript
$('#css-menu').smartmenus({
  showDuration: 0,
  hideDuration: 0,
  showFunction: function($ul, complete) {
    $ul.css('opacity', 0).show().animate({ opacity: 1 }, 200, complete);
  },
  hideFunction: function($ul, complete) {
    $ul.animate({ opacity: 0 }, 150, function() {
      $ul.hide();
      complete();
    });
  }
});
```

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

### ES6 Modules Usage of SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Import and initialize SmartMenus using ES6 modules with a bundler. Requires jQuery and SmartMenus to be installed.

```javascript
import $ from 'jquery';
import 'smartmenus';

$(function() {
  $('#main-menu').smartmenus();
});
```

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

### Fade Animation Example for SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Implement a fade-in/fade-out animation for sub-menus using jQuery's fadeIn/fadeOut methods.

```javascript
$('#fade-menu').smartmenus({
  showFunction: function($ul, complete) {
    $ul.fadeIn(200, complete);
  },
  hideFunction: function($ul, complete) {
    $ul.fadeOut(150, complete);
  }
});
```

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

### Customize Highlight Classes with data-sm-options

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-top.html

Use the `data-sm-options` attribute to pass custom CSS classes for highlighting expanded parent dropdown items. The example sets classes for dark text and a light background.

```html
<ul class="navbar-nav mr-auto" data-sm-options='{"bootstrapHighlightClasses": "text-dark bg-light"}'>
  <li><a class="nav-link" href="#">Home</a></li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </li>
</ul>
```

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

### API Methods

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-bottom.html

The SmartMenus Bootstrap Addon provides methods for dynamic initialization.

```APIDOC
## API Methods

### `jQuery.SmartMenus.Bootstrap.init()`

Reinitializes the addon. This is useful if you dynamically add any navbars to your page after the initial load and need to apply SmartMenus features to them. All navbars are normally initialized automatically on `domready`.
```

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

### Implement Keyboard Navigation

Source: https://context7.com/vadikom/smartmenus/llms.txt

Include the keyboard addon script to enable arrow key navigation and optional hotkeys.

```html
<!-- Include after SmartMenus core -->
<script src="jquery.smartmenus.js"></script>
<script src="addons/keyboard/jquery.smartmenus.keyboard.js"></script>

<script>
$(function() {
  // Initialize menu - keyboard navigation is automatic
  $('#main-menu').smartmenus();

  // Optionally set a hotkey to focus the menu
  var menuInstance = $('#main-menu').data('smartmenus');

  // Focus menu on Alt+M
  menuInstance.keyboardSetHotkey(77, ['altKey']); // 77 = 'M' key

  // Focus menu on Ctrl+Shift+N
  menuInstance.keyboardSetHotkey(78, ['ctrlKey', 'shiftKey']); // 78 = 'N' key
});
</script>

<!--
Keyboard navigation:
- Arrow Up/Down: Navigate within a sub-menu
- Arrow Left: Close current sub-menu / move to parent
- Arrow Right: Open sub-menu / move to child
- Enter/Space: Activate item / open sub-menu
- Escape: Close all sub-menus
- Tab: Standard focus navigation
-->
```

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

### Initialize SmartMenus with Custom Options

Source: https://context7.com/vadikom/smartmenus/llms.txt

Initialize SmartMenus with custom configuration options to control behavior like sub-menu offsets and timeouts. The DOM must be ready.

```javascript
$(function() {
  $('#main-menu').smartmenus({
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -8,
    showTimeout: 150,
    hideTimeout: 300
  });
});
```

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

### Instance Methods

Source: https://context7.com/vadikom/smartmenus/llms.txt

Methods available on the SmartMenus instance for programmatic control.

```APIDOC
## Instance Methods

### Description
Access the SmartMenus instance to call methods directly for programmatic control of menu behavior.

### Methods
- **destroy()**: Removes all SmartMenus functionality.
- **refresh()**: Refreshes the menu (useful after dynamically adding items).
- **disable(noOverlay)**: Disables the menu. If noOverlay is true, disables without showing the overlay.
- **enable()**: Enables a disabled menu.
- **menuHideAll()**: Hides all visible sub-menus.
- **itemActivate($item)**: Programmatically activates a menu item.
- **isCollapsible()**: Returns true if the menu is in collapsible (mobile) mode.
```

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

### Initialize SmartMenus with Browserify

Source: https://github.com/vadikom/smartmenus/blob/master/README.md

Require jQuery, the plugin, and addons in an entry file to initialize the menu on the DOM.

```javascript
var jQuery = require('jquery');
require('smartmenus');
require('smartmenus-keyboard');

jQuery(function() {
  jQuery('#main-menu').smartmenus();
});
```

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

### Initialize SmartMenus with Options

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/index.html

Initializes the SmartMenus plugin on an element with custom sub-menu offset options. Ensure the DOM is ready before calling this.

```javascript
$(function() { $('#main-menu').smartmenus({ subMenusSubOffsetX: 1, subMenusSubOffsetY: -8 }); });
```

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

### Initialize SmartMenus with Default Options

Source: https://context7.com/vadikom/smartmenus/llms.txt

Use this snippet to initialize the SmartMenus plugin on an element with its default settings. Ensure the DOM is ready before calling.

```javascript
$.fn.extend({
  smartmenus: function(options) {
    return this.each(function() {
      // Plugin logic here
    });
  }
});
```

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

### Initialize SmartMenus with JavaScript Options

Source: https://context7.com/vadikom/smartmenus/llms.txt

Configure SmartMenus behavior by passing an options object during initialization. This method allows fine-grained control over all aspects of the menu.

```javascript
$"#main-menu".smartmenus({
  // Popup menu mode (show via popupShow method)
  isPopup: false,

  // Sub-menu positioning offsets
  mainMenuSubOffsetX: 0,    // Horizontal offset for first-level subs
  mainMenuSubOffsetY: 0,    // Vertical offset for first-level subs
  subMenusSubOffsetX: 0,    // Horizontal offset for deeper subs
  subMenusSubOffsetY: 0,    // Vertical offset for deeper subs

  // Sub-menu dimensions
  subMenusMinWidth: '10em', // Minimum width (CSS unit)
  subMenusMaxWidth: '20em', // Maximum width (CSS unit)

  // Sub-menu indicators
  subIndicators: true,           // Show sub-menu arrow indicators
  subIndicatorsPos: 'append',    // Position: 'append' or 'prepend'
  subIndicatorsText: '',         // Text content for indicator span

  // Scrolling for long sub-menus
  scrollStep: 30,           // Pixels per scroll step
  scrollAccelerate: true,   // Enable scroll acceleration

  // Timing
  showTimeout: 250,         // Delay before showing sub-menus (ms)
  hideTimeout: 500,         // Delay before hiding sub-menus (ms)
  showDuration: 0,          // Animation duration for showing
  hideDuration: 0,          // Animation duration for hiding

  // Click behavior
  showOnClick: false,       // Show first-level subs on click only
  hideOnClick: true,        // Hide subs on outside click/tap
  noMouseOver: false,       // Disable hover activation

  // Viewport handling
  keepInViewport: true,     // Auto-reposition to stay in viewport
  keepHighlighted: true,    // Keep parent items highlighted

  // Current item marking
  markCurrentItem: false,   // Auto-mark current page item
  markCurrentTree: true,    // Mark ancestor items too

  // Direction
  rightToLeftSubMenus: false,  // RTL sub-menu positioning
  bottomToTopSubMenus: false,  // Bottom-to-top sub-menus

  // Mobile/collapsible behavior
  collapsibleBehavior: 'default',
  // Options: 'default', 'toggle', 'link',
  //          'accordion', 'accordion-toggle', 'accordion-link'

  // Custom animation functions
  showFunction: null,
  hideFunction: function($ul, complete) {
    $ul.fadeOut(200, complete);
  },
  collapsibleShowFunction: function($ul, complete) {
    $ul.slideDown(200, complete);
  },
  collapsibleHideFunction: function($ul, complete) {
    $ul.slideUp(200, complete);
  }
});
```

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

### Define package.json for Browserify

Source: https://github.com/vadikom/smartmenus/blob/master/README.md

Specify dependencies for a project using SmartMenus and the keyboard addon via npm.

```json
{
  "name": "myapp-using-smartmenus",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "jquery": ">=2.1.3",
    "smartmenus": ">=1.1.0",
    "smartmenus-keyboard": ">=0.4.0"
  },
  "devDependencies": {
    "browserify": ">=9.0.3"
  }
}
```

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

### jQuery.SmartMenus.Bootstrap.init()

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar.html

Reinitializes the SmartMenus Bootstrap addon. This is useful when navbars are added to the DOM dynamically after the initial page load.

```APIDOC
## jQuery.SmartMenus.Bootstrap.init()

### Description
Reinitializes the SmartMenus Bootstrap addon. This method is useful if you add any navbars dynamically on your page and need to initialize them, as all navbars are normally initialized on DOM ready.

### Method
JavaScript Method

### Usage
`jQuery.SmartMenus.Bootstrap.init();`
```

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

### Initialize SmartMenus with Keyboard Hotkey

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/keyboard-navigation.html

Initializes SmartMenus with specific offsets and sets a keyboard hotkey for menu navigation. The hotkey is configured using a key code and a modifier string.

```javascript
$(function() { $('#main-menu').smartmenus({ subMenusSubOffsetX: 1, subMenusSubOffsetY: -8 }); $('#main-menu').smartmenus('keyboardSetHotkey', '123', 'shiftKey'); });
```

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

### AMD Usage of SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Load and initialize SmartMenus using AMD (RequireJS). Ensure jQuery is loaded before SmartMenus.

```javascript
define(['jquery', 'smartmenus'], function($) {
  $(function() {
    $('#main-menu').smartmenus();
  });
});
```

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

### Initialize SmartMenus Bootstrap Addon

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

Call `jQuery.SmartMenus.Bootstrap.init()` to reinitialize the addon, which is useful for dynamically added navbars.

```javascript
jQuery.SmartMenus.Bootstrap.init()
```

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

### Integrate with Bootstrap 4

Source: https://context7.com/vadikom/smartmenus/llms.txt

Use the Bootstrap 4 addon for zero-configuration integration with standard navbar structures.

```html
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">

<!-- HTML - Standard Bootstrap 4 navbar structure with nested ULs -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
          data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#">Dropdown</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li class="dropdown">
            <a class="dropdown-item dropdown-toggle" href="#">Sub menu</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Sub item 1</a></li>
              <li><a class="dropdown-item" href="#">Sub item 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="jquery.smartmenus.js"></script>
<script src="addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>

<!-- Auto-initialization happens on DOM ready -->
<!-- Manual reinit for dynamically added navbars: -->
<script>
  // After adding new navbars dynamically
  $.SmartMenus.Bootstrap.init();
</script>
```

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

### Static Methods

Source: https://context7.com/vadikom/smartmenus/llms.txt

Global operations provided by the $.SmartMenus object.

```APIDOC
## Static Methods

### Description
SmartMenus provides static methods on the $.SmartMenus object for global operations across all menu instances.

### Methods
- **$.SmartMenus.hideAll()**: Hides all sub-menus in all SmartMenus instances on the page.
- **$.SmartMenus.destroy()**: Destroys all SmartMenus instances on the page.
```

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

### Include Bootstrap CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-bottom.html

Link to the Bootstrap core CSS file. Ensure this is included for proper styling.

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
```

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

### Configure SmartMenus with Data Attributes

Source: https://context7.com/vadikom/smartmenus/llms.txt

Specify SmartMenus options directly on the menu element using the `data-sm-options` attribute for declarative configuration. Initialization then uses these attributes by default.

```html
<ul id="main-menu" class="sm sm-blue" data-sm-options='{
  "subMenusSubOffsetX": 1,
  "subMenusSubOffsetY": -8,
  "showTimeout": 150,
  "markCurrentItem": true,
  "rightToLeftSubMenus": false
}'>
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a>
    <ul>
      <li><a href="/about/team/">Team</a></li>
    </ul>
  </li>
</ul>

<script>
  // Initialize without options - will use data-sm-options
  $(function() {
    $('#main-menu').smartmenus();
  });
</script>
```

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

### Include Bootstrap and SmartMenus CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-static-top.html

Include these CSS files in your HTML head to enable Bootstrap styling and SmartMenus Bootstrap Addon functionality. No further configuration is needed for basic usage.

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
```

```html
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
```

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

### Options

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar.html

Additional options that can be configured via the `data-sm-options` attribute.

```APIDOC
## Options

### `bootstrapHighlightClasses`

- **Description**: CSS class(es) for highlighting expanded parent dropdown items.
- **Default**: `'text-dark bg-light'`
- **Usage**: Set via the `data-sm-options` attribute, e.g., `data-sm-options="bootstrapHighlightClasses: 'my-custom-class'"`.

[Refer to the SmartMenus documentation for a complete list of available options.](https://www.smartmenus.org/docs/#options)
```

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

### RTL Sub-Menus via Options

Source: https://context7.com/vadikom/smartmenus/llms.txt

Enable right-to-left sub-menu behavior programmatically using the 'rightToLeftSubMenus' option.

```javascript
$('#main-menu').smartmenus({
  rightToLeftSubMenus: true
});
```

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

### Configure RequireJS (AMD) for SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Configure RequireJS to load jQuery and the SmartMenus plugin. Used for AMD module systems.

```javascript
requirejs.config({
  paths: {
    'jquery': 'libs/jquery',
    'smartmenus': 'jquery.smartmenus.min'
  }
});
```

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

### API Method

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar.html

The available API method for interacting with the SmartMenus Bootstrap addon.

```APIDOC
## API

### `jQuery.SmartMenus.Bootstrap.init()`

- **Description**: Reinitializes the SmartMenus addon. This is useful if you dynamically add any navbars to your page and need to initialize them at a later time. All navbars are normally initialized on `domready`.
- **Usage**: `jQuery.SmartMenus.Bootstrap.init();`
```

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

### Include Bootstrap and SmartMenus JavaScript

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-top.html

Include jQuery, Popper.js, Bootstrap JS, the SmartMenus jQuery plugin, and the SmartMenus Bootstrap 4 Addon in your HTML. Ensure the order is correct.

```html
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
```

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

### Configure RequireJS for SmartMenus

Source: https://github.com/vadikom/smartmenus/blob/master/README.md

Define the path for the SmartMenus plugin to ensure addons can resolve the module name correctly.

```javascript
requirejs.config({
  "paths": {
    'smartmenus': 'jquery.smartmenus.min'
  }
  // ...

```

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

### Bottom-to-Top Sub-Menus via Options

Source: https://context7.com/vadikom/smartmenus/llms.txt

Configure sub-menus to open from bottom-to-top, useful for fixed-bottom navigation bars, using the 'bottomToTopSubMenus' option.

```javascript
$('#footer-menu').smartmenus({
  bottomToTopSubMenus: true
});
```

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

### API Methods

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

The SmartMenus Bootstrap Addon provides the following API method for programmatic control.

```APIDOC
## API

The following methods are available:

*   `jQuery.SmartMenus.Bootstrap.init()` - reinit the addon. Useful if you add any navbars dynamically on your page and need to init them (all navbars are normally initialized ondomready).
```

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

### Configure and Use SmartMenus as a Popup Menu

Source: https://context7.com/vadikom/smartmenus/llms.txt

Initialize SmartMenus with popup mode enabled and use the popup API to show and hide context or popup menus at specific coordinates. Useful for right-click menus.

```javascript
// Initialize as popup menu
$('#popup-menu').smartmenus({
  isPopup: true,
  hideOnClick: true
});

// Show popup at mouse position on right-click
$(document).on('contextmenu', function(e) {
  e.preventDefault();
  $('#popup-menu').smartmenus('popupShow', e.pageX, e.pageY);
});

// Hide the popup programmatically
$('#popup-menu').smartmenus('popupHide');

// Hide immediately without timeout
$('#popup-menu').smartmenus('popupHide', true);
```

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

### keyboardSetHotkey

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/keyboard-navigation.html

Sets a hotkey combination to send focus to the menu tree. This allows users to quickly access the menu using a keyboard shortcut.

```APIDOC
## POST /api/smartmenus/keyboardSetHotkey

### Description
Sets a hotkey combination that will send focus to the menu tree.

### Method
POST

### Endpoint
/api/smartmenus/keyboardSetHotkey

### Parameters
#### Request Body
- **keyCode** (Integer) - Required - The key code for the hotkey.
- **modifiers** (String, Array) - Required - The hotkey modifier key. Can be 'ctrlKey', 'shiftKey', 'altKey', 'metaKey', or an array of these.

### Request Example
```json
{
  "keyCode": 123,
  "modifiers": "shiftKey"
}
```

### Response
#### Success Response (200)
- **status** (String) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Create Multi-level Navbar with Bootstrap 4

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar.html

Replace standard div-based dropdown menus with nested ul/li structures to enable multi-level menu support.

```html
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded mb-4">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <!-- Left nav -->
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">One more separated link</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">A long sub menu</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><a class="dropdown-item" href="#">One more link</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 1</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 2</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 3</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 4</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 5</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 6</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 7</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 8</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 9</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 10</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 11</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 12</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 13</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 14</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 15</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 16</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 17</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 18</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 19</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 20</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 21</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 22</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 23</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 24</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 25</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 26</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 27</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 28</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 29</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 30</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 31</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 32</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 33</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 34</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 35</a></li>
                  <li><a class="dropdown-item" href="#">Menu item 36</a></li>
```

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

### SmartMenus JavaScript Dependencies

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar.html

Required script tags for jQuery, Popper.js, Bootstrap, and the SmartMenus plugin.

```html
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
```

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

### Include Bootstrap and SmartMenus CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar.html

Include these CSS files in your HTML to enable Bootstrap 4 styling and SmartMenus functionality for navbars. Ensure the paths are correct for your project structure.

```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
```

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

### Include SmartMenus Bootstrap Addon CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-bottom.html

Link to the SmartMenus jQuery Bootstrap Addon CSS file. This file provides the necessary styles for SmartMenus to integrate with Bootstrap components.

```html
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
```

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

### Set Keyboard Hotkey for Menu

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/keyboard-navigation.html

Sets a hotkey combination to send focus to the menu tree. Use modifier keys like 'shiftKey' for best compatibility. Avoid using single keys to prevent interfering with browser defaults.

```javascript
// set Shift + F12 hotkey
$('#main-menu').smartmenus('keyboardSetHotkey', 123, 'shiftKey');
```

```javascript
// set Ctrl + Alt + Shift + F12 hotkey
$('#main-menu').smartmenus('keyboardSetHotkey', 123, ["ctrlKey", "altKey", "shiftKey"])
```

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

### Popup Menu API

Source: https://context7.com/vadikom/smartmenus/llms.txt

API for creating and controlling context or popup menus.

```APIDOC
## Popup Menu API

### Description
Create context menus or popup menus that can be shown at specific coordinates using the popup API.

### Methods
- **popupShow(x, y)**: Shows the popup at the specified coordinates.
- **popupHide(immediate)**: Hides the popup. If immediate is true, hides without timeout.
```

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

### Include SmartMenus Bootstrap Addon CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar.html

Include the Bootstrap core CSS followed by the SmartMenus jQuery Bootstrap Addon CSS to enable the addon functionality.

```html
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
```

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

### Include Bootstrap and SmartMenus JavaScript

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

Include jQuery, Bootstrap's JavaScript, SmartMenus jQuery plugin, and the SmartMenus Bootstrap Addon at the end of your document for faster page loading.

```html
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
```

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

### Configure Bootstrap 4 with Data Attributes

Source: https://context7.com/vadikom/smartmenus/llms.txt

Control specific SmartMenus behaviors in Bootstrap navbars using data attributes.

```html
<!-- Skip SmartMenus initialization for this navbar -->
<ul class="nav navbar-nav" data-sm-skip>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<!-- Use Bootstrap's default collapsible behavior -->
<ul class="nav navbar-nav" data-sm-skip-collapsible-behavior>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<!-- Custom highlight classes for expanded items -->
<ul class="nav navbar-nav" data-sm-options='{"bootstrapHighlightClasses": "text-primary bg-white"}'>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
```

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

### Create Mega Menus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Add the mega-menu class to a sub-menu to enable custom HTML content within a drop-down.

```html
<ul id="main-menu" class="sm sm-blue">
  <li><a href="/">Home</a></li>
  <li><a href="#">Products</a>
    <ul class="mega-menu">
      <li>
        <!-- Custom mega menu content -->
        <div style="width: 600px; max-width: 100%; padding: 20px;">
          <div class="row">
            <div class="col-4">
              <h4>Category 1</h4>
              <ul class="list-unstyled">
                <li><a href="#">Product A</a></li>
                <li><a href="#">Product B</a></li>
                <li><a href="#">Product C</a></li>
              </ul>
            </div>
            <div class="col-4">
              <h4>Category 2</h4>
              <ul class="list-unstyled">
                <li><a href="#">Product D</a></li>
                <li><a href="#">Product E</a></li>
                <li><a href="#">Product F</a></li>
              </ul>
            </div>
            <div class="col-4">
              <h4>Featured</h4>
              <img src="featured.jpg" alt="Featured Product" />
            </div>
          </div>
        </div>
      </li>
    </ul>
  </li>
  <li><a href="/contact/">Contact</a></li>
</ul>
```

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

### Custom Show/Hide Animations for SmartMenus

Source: https://context7.com/vadikom/smartmenus/llms.txt

Define custom JavaScript functions for showing and hiding desktop sub-menus using 'showFunction' and 'hideFunction'.

```javascript
$('#main-menu').smartmenus({
  // Desktop sub-menu animations
  showFunction: function($ul, complete) {
    $ul.slideDown(250, complete);
  },
  hideFunction: function($ul, complete) {
    $ul.slideUp(200, complete);
  },

  // Mobile/collapsible animations
  collapsibleShowFunction: function($ul, complete) {
    $ul.slideDown(300, 'easeOutQuad', complete);
  },
  collapsibleHideFunction: function($ul, complete) {
    $ul.slideUp(200, 'easeInQuad', complete);
  }
});
```

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

### JavaScript Inclusion

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

Include the necessary JavaScript files for Bootstrap, SmartMenus jQuery, and the SmartMenus Bootstrap Addon. It's recommended to place these at the end of the document for faster page loading.

```APIDOC
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
```

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

### Use SmartMenus Static Methods

Source: https://context7.com/vadikom/smartmenus/llms.txt

Utilize static methods on the $.SmartMenus object for global operations affecting all SmartMenus instances on the page, such as hiding all sub-menus or destroying all instances.

```javascript
// Hide all sub-menus in all SmartMenus instances on the page
$.SmartMenus.hideAll();

// Destroy all SmartMenus instances on the page
$.SmartMenus.destroy();
```

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

### Navbar data-* Attributes

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar.html

Configuration attributes that can be applied to ul.navbar-nav elements to control SmartMenus behavior.

```APIDOC
## Navbar data-* Attributes

### Description
Custom attributes that can be set on `ul.navbar-nav` elements to configure the SmartMenus plugin behavior.

### Attributes
- **data-sm-options** (string) - Optional - Set any custom options for the SmartMenus jQuery plugin.
- **data-sm-skip** (boolean) - Optional - Tells the script to skip this navbar and not apply any SmartMenus features.
- **data-sm-skip-collapsible-behavior** (boolean) - Optional - Disables SmartMenus' specific behavior in collapsible (mobile) mode, reverting to default Bootstrap behavior.
```

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

### Skip SmartMenus Initialization with data-sm-skip

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-top.html

Use the `data-sm-skip` attribute on a `.navbar-nav` element to prevent SmartMenus from applying its features, allowing it to function as a standard Bootstrap navbar.

```html
<ul class="navbar-nav mr-auto" data-sm-skip>
  <li><a class="nav-link" href="#">Home</a></li>
  <li><a class="nav-link" href="#">About</a></li>
</ul>
```

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

### Customization with data-* attributes

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

You can customize SmartMenus behavior by adding specific data attributes to any `ul.navbar-nav` element.

```APIDOC
## Customization with data-* attributes

The following `data-*` attributes can be set to any `ul.navbar-nav`:

*   `data-sm-options` - set any custom options for the SmartMenus jQuery plugin ([check the docs](http://www.smartmenus.org/docs/#data-sm-options) for details).
*   `data-sm-skip` - this will tell the script to skip this navbar and not apply any SmartMenus features to it so it will behave like a regular Bootstrap navbar.
*   `data-sm-skip-collapsible-behavior` - this will tell the script to not apply SmartMenus' specific behavior to this navbar in collapsible mode (mobile view). Bootstrap's behavior for navbars in collapsible mode is to use the whole area of the parent items just as a toggle button for their sub menus and thus it's impossible to set a link to the parent items that can be followed on click/tap. SmartMenus' behavior is to add a separate dedicated +/- sub menus toggle button to parent items and thus allows the link of the parent items to be activated on the second click/tap (the first click/tap displays the sub menu if it's not visible).
```

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

### Customize Dropdown Highlight with bootstrapHighlightClasses

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-bottom.html

Configure the `bootstrapHighlightClasses` option within a `data-sm-options` attribute to define CSS classes for highlighting expanded parent dropdown items.

```html
<nav class="navbar navbar-expand-lg navbar-light bg-light" data-sm-options="{&quot;bootstrapHighlightClasses&quot;: &quot;text-dark bg-light&quot;}">
  ...
</nav>
```

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

### SmartMenus Event API

Source: https://context7.com/vadikom/smartmenus/llms.txt

Documentation for custom events triggered on the menu root element to hook into menu behavior.

```APIDOC
## SmartMenus Events

### Description
SmartMenus triggers custom events on the menu root element that can be used to hook into menu behavior for custom functionality. Events include lifecycle hooks for showing/hiding sub-menus and interaction hooks for menu items.

### Events
- **beforefirstshow.smapi**: Triggered before a sub-menu is shown for the first time. Return false to cancel.
- **beforeshow.smapi**: Triggered before a sub-menu is shown. Return false to cancel.
- **show.smapi**: Triggered after a sub-menu is shown.
- **beforehide.smapi**: Triggered before a sub-menu is hidden. Return false to cancel.
- **hide.smapi**: Triggered after a sub-menu is hidden.
- **hideAll.smapi**: Triggered when all sub-menus are hidden.
- **activate.smapi**: Triggered when a menu item is activated. Return false to cancel.
- **select.smapi**: Triggered when a menu item is selected (clicked). Return false to prevent default link behavior.
- **click.smapi**: Triggered on menu item click. Return false to prevent default behavior.
- **focus.smapi**: Triggered when a menu item receives focus.
- **blur.smapi**: Triggered when a menu item loses focus.
- **mouseenter.smapi**: Triggered on mouse enter.
- **mouseleave.smapi**: Triggered on mouse leave.
```

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

### Access and Use SmartMenus Instance Methods

Source: https://context7.com/vadikom/smartmenus/llms.txt

Retrieve the SmartMenus instance from a jQuery object to programmatically control menu behavior like destroying, refreshing, enabling/disabling, hiding menus, and activating items.

```javascript
// Get the SmartMenus instance
var menuInstance = $('#main-menu').data('smartmenus');

// Destroy the menu (remove all SmartMenus functionality)
menuInstance.destroy();
// Or via jQuery: $('#main-menu').smartmenus('destroy');

// Refresh the menu (useful after dynamically adding items)
menuInstance.refresh();
// Or via jQuery: $('#main-menu').smartmenus('refresh');

// Disable the menu (shows overlay, prevents interaction)
menuInstance.disable();
// Or via jQuery: $('#main-menu').smartmenus('disable');

// Disable without overlay
menuInstance.disable(true);

// Enable a disabled menu
menuInstance.enable();
// Or via jQuery: $('#main-menu').smartmenus('enable');

// Hide all visible sub-menus
menuInstance.menuHideAll();
// Or via jQuery: $('#main-menu').smartmenus('menuHideAll');

// Programmatically activate a menu item
var $menuItem = $('#main-menu').find('a').eq(2);
menuInstance.itemActivate($menuItem);
// Or via jQuery: $('#main-menu').smartmenus('itemActivate', $menuItem);

// Check if menu is in collapsible (mobile) mode
var isCollapsible = menuInstance.isCollapsible();
console.log('Is collapsible:', isCollapsible);
```

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

### Navbar Configuration Attributes

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-top.html

Custom data attributes that can be applied to .navbar-nav elements to control SmartMenus behavior.

```APIDOC
## Navbar Data Attributes

### Description
Attributes applied to `.navbar-nav` elements to customize SmartMenus integration.

### Parameters
- **data-sm-skip** (attribute) - Optional - Tells the script to skip this navbar and not apply SmartMenus features.
- **data-sm-skip-collapsible-behavior** (attribute) - Optional - Disables SmartMenus' specific behavior in collapsible (mobile) mode.
- **data-sm-options** (attribute) - Optional - Used to set configuration options, such as 'bootstrapHighlightClasses'.
```

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

### Skip SmartMenus Initialization with data-sm-skip

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-bottom.html

Use the `data-sm-skip` attribute on a navbar to prevent SmartMenus from applying its features, allowing it to function as a standard Bootstrap navbar.

```html
<nav class="navbar navbar-expand-lg navbar-light bg-light" data-sm-skip>
  ...
</nav>
```

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

### Include SmartMenus Bootstrap 4 CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-4-navbar-fixed-top.html

Include these stylesheet links in your HTML head to integrate the SmartMenus Bootstrap 4 Addon alongside the standard Bootstrap 4 CSS.

```html
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
```

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

### Include Bootstrap and SmartMenus Bootstrap Addon CSS

Source: https://github.com/vadikom/smartmenus/blob/master/src/demo/bootstrap-navbar-fixed-top.html

Include these CSS files in your HTML to enable SmartMenus functionality within a Bootstrap 3 navbar. The Bootstrap core CSS is required, followed by the SmartMenus Bootstrap Addon CSS.

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
```