MenuBar

Adds keyboard navigation support to an element with [role="menubar"]. Also, recursively creates Menu/MenuBar instances for sub menus. Supports the following spec:

Key	Action
Shift + Tab	DESKTOP: Focus out of Menu. MOBILE: Navigates to the previous MenuItem.
Tab	DESKTOP: Focus into Menu. MOBILE: Navigates to the next MenuItem.
⬆	DESKTOP: None. MOBILE: Navigates to previous MenuItem.
⬇	DESKTOP: Navigates to the first sub menu MenuItem if it exists. MOBILE: Navigates to the next MenuItem.
⬅	Navigates to the previous MenuItem.
⮕	Navigates to the next MenuItem.
Home	Navigates to the first MenuItem.
End	Navigates to the last MenuItem.
Spacebar or Enter	Navigates to the first sub menu MenuItem or clicks current MenuItem.
Any Character	Navigates to the closest MenuItem that starts with the matching character.

Installation

Terminal

pnpm add @mvps-genesis/accessibility

Example Usage

.js

import {MenuBar} from '@mvps-genesis/accessibility';

// Basic instance constructor
new MenuBar({
    element: '.js-my-menubar-element',
    breakpoint: '60em',
    navigateOnDown: true,
    navigateOnEnter: true,
    navigateOnSpace: true,
    subMenuFocusDelay: 100
});

// Create from NodeList
MenuBar.createFromNodeList(
    document.querySelectorAll('.js-my-menubar-elements'),
    {
        breakpoint: '60em',
        navigateOnDown: true,
        navigateOnEnter: true,
        navigateOnSpace: true,
        subMenuFocusDelay: 100
    }
);

Parameters

Inherits all of the same parameters from Menu.