Keyboard navigation introduction

To enable navigating the menu wih a keyboard, use the keyboardNavigation options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                keyboardNavigation: {
                    // keyboard navigation options
                }
            }, {
                keyboardNavigation: {
                    // keyboard navigation configuration
                }
            });
        }
    );
</script>

Note that the "keyboardNavigation" add-on is disabled for touchscreens to prevent an virtual keyboard to appear when opening the menu.

Options for the "keyboardNavigation" add-on

Option Datatype Default value Description
1 See "Enhancements".
keyboardNavigation A map of options or true or "default" for keyboardNavigation.enable.
{
enable Boolean false 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 Boolean false 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.

CSS variables for the "keyboardNavigation" add-on

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

SCSS variables for the "keyboardNavigation" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_keyboardnavigation Boolean true Whether or not to include CSS for the keyboardNavigation add-on throughout the entire CSS framework.

API methods for the "keyboardNavigation" add-on

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

Next add-on:
Lazy submenus