Keyboard navigation introduction

To enable navigating the menu wih a keyboard, include the "keyboardNavigation" add-on .js and .css files and use the keyboardNavigation options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.keyboardnavigation.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.keyboardnavigation.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            keyboardNavigation: {
               // keyboardNavigation options
            }
         });
      });
   </script>

Options for the "keyboardNavigation" add-on

Option Default value Datatype Description
1 See "Enhancements".
keyboardNavigation A map of options or true or "default" for keyboardNavigation.enable.
{
enable false Boolean Whether or not to enable navigating the menu with a keyboard.
Set to "default" to automatically put focus on the first focusable element when opening the menu or a panel.
enhance 1 false Boolean Whether or not to enhance the basic default keyboard navigation.
}
Enhancements

With the keyboardNavigation.enhance option set to true, the menu will be enhanced for navigating with a keyboard beyond the basic default usage:

Configuration for the "keyboardNavigation" add-on

The "keyboardNavigation" add-on has no configuration options.

API methods for the "keyboardNavigation" add-on

The "keyboardNavigation" add-on has no API methods.

SCSS variables for the "keyboardNavigation" add-on

The "keyboardNavigation" add-on has no SCSS variables.

SCSS mixins for the "keyboardNavigation" add-on

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_keyboardnavigation Include this mixin to create a custom color scheme for the "keyboardNavigation" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$backgroundColor $mm_emphasizedBackgroundColor 2 The background-color of the focused menu item.
)

Next add-on:
Lazy submenus