SmartMenus

You can install SmartMenus using several methods:

• npm: npm install smartmenus
• Bower: bower install smartmenus
• Manual: Download the latest release from the official website.
• Git: Clone the repository directly: git clone https://github.com/vadikom/smartmenus.git.

To use addons from the addons directory as AMD modules (e.g., with RequireJS), you must ensure your SmartMenus jQuery plugin module is named smartmenus.

Example RequireJS configuration:

requirejs.config({
  "paths": {
    'smartmenus': 'jquery.smartmenus.min'
  }
  // ...
});

When using mobile/collapsible styles, the collapsibleBehavior option determines how parent items behave when tapped:

• 'default': The first tap on a parent item expands the sub-menu; the second tap loads the parent's link.
• 'toggle': The entire parent item acts as a toggle button, expanding or collapsing the sub-menu on each tap.
• 'link': The parent item acts as a regular link (first tap loads the link); the sub-menu can only be expanded via the sub-indicator (+/-) button.
• 'accordion': Like 'default', but expanding a menu automatically resets (closes) any other visible sub-menus from deeper levels or different branches.
• 'accordion-toggle': Like 'toggle', but expanding a menu automatically resets any other visible sub-menus.
• 'accordion-link': Like 'link', but expanding a menu automatically resets any other visible sub-menus.

The SmartMenus Bootstrap addon automates the integration between SmartMenus and Bootstrap's navbar components. It handles class synchronization (e.g., adding .open to Bootstrap menus and .active to parent items), manages collapsible behavior detection, and resolves keyboard navigation conflicts common in Bootstrap 3.3.5+.

To use the addon, ensure jQuery, SmartMenus, and the Bootstrap addon are loaded. The addon automatically initializes all ul.navbar-nav elements that do not have the data-sm-skip attribute.

<!-- Example HTML structure for automatic initialization -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle">Menu</a>
        <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

If you have a Bootstrap navbar that you want to manage manually or do not want the SmartMenus Bootstrap addon to automatically initialize, add the data-sm-skip attribute to the ul.navbar-nav element.

<ul class="navbar-nav" data-sm-skip>
  <!-- This navbar will not be automatically initialized by the Bootstrap addon -->
</ul>

SmartMenus supports CommonJS module loading. You can require the plugin and pass the jQuery dependency to the factory function.

Note: Ensure jQuery is installed and available in your environment.

const $ = require('jquery');
const $.SmartMenus = require('smartmenus')( $ );

The Bootstrap 4 addon automatically initializes SmartMenus on all ul.navbar-nav elements that do not have the data-sm-skip attribute. It synchronizes Bootstrap 4 classes (like .show and .active) with SmartMenus states and handles conflicts between Bootstrap's dropdown logic and SmartMenus' keyboard navigation.

To prevent the addon from automatically initializing a specific navbar, add the data-sm-skip attribute to the <ul> element.

<ul class="navbar-nav" data-sm-skip>
  <!-- This navbar will NOT be automatically initialized by the Bootstrap 4 addon -->
</ul>

To initialize SmartMenus on a <ul> element, use the .smartmenus() method. You can pass an options object directly to the method, or define configuration via the data-sm-options attribute on the root <ul> element. If using data-sm-options, the value must be a valid JSON object. Note that function-based options (like showFunction or hideFunction) cannot be provided via the HTML attribute and must be passed through the JavaScript options object.

// Via JavaScript options
$('ul').smartmenus({
  subIndicators: true,
  showDuration: 200
});

// Via HTML attribute (must be valid JSON)
// <ul data-sm-options='{"subIndicators": true}'>...</ul>

SmartMenus supports AMD (Asynchronous Module Definition). You can define the module by providing jquery as a dependency.

// Using RequireJS or similar AMD loader
define(['jquery'], function($) {
    // SmartMenus is initialized via the factory pattern
    // provided by the library
});

The SmartMenus Keyboard Addon enables users to navigate menus using arrow keys (Left, Up, Right, Down). It automatically hooks into the keydown event for elements matching ul.sm or ul.navbar-nav:not([data-sm-skip]).

Key behaviors include:

• Arrow Keys: Navigates between menu items, handles sub-menu entry/exit, and respects menu direction (RTL support via .sm-rtl class).
• Automatic Integration: Once the addon is loaded, it attaches itself to the document to listen for keyboard events on valid SmartMenus containers.
• Exclusion: You can prevent a menu from receiving keyboard navigation by adding the data-sm-skip attribute to the <ul> element.

By default, the addon detects when a navbar becomes collapsible based on viewport width and CSS layout. You can modify this behavior using the data-sm-skip-collapsible-behavior attribute on the ul.navbar-nav element:

1. Standard Behavior: The addon adds .sm-collapsible to the navbar and applies .navbar-toggle .sub-arrow classes to carets to make them look like Bootstrap buttons.
2. Skip Behavior: If data-sm-skip-collapsible-behavior is present, the addon sets collapsibleBehavior to 'toggle'. This uses the entire item area as a submenu toggle and prevents the customization of carets.

<ul class="navbar-nav" data-sm-skip-collapsible-behavior>
  <!-- Uses 'toggle' behavior and preserves default caret appearance -->
</ul>