Demo

Initial setup

Paste below HTML structure at your code where you want menu to appear. Any ID or classname is fine. Call the menu component from Wrapper library 

    
        <div id='menu_container'></div>

Configuration

All sort of customization need to be passed as an Object. Menu settings can be customized by altering few attributes like

Key name Type Value
id String It's a required attribute and necessary to follow accessibility guideline. This should be unique
mainMenuLabelSRText String Label stating purpose of Menu bar. This is a required key. Passing empty string will display default string from Library which is 'Functions'
brandLogo Object This object holds setting for Brand logo which appears at the beginning of Menubar. This is a required key. It has following keys inside.
  • link - Pass URL for the logo
  • content - Text content of the logo. This key accepts HTML element as string as well. So brand image or icon can be passed.
menuList Array of Objects This is a required key and holds information about menu items. Please note, Menu library support only one layer sub menu level. For multi-layer, please refer to Mega menu (Under construction) component. Each object contains following keys -
  • name - This is a required key and accepts STRING only. Display text of menu item.
  • link - This is a required key and accepts STRING only. Link of menu item.
  • subMenu - This is an optional key and mentioning this key will tell library to create sub menu level. This key accepts array of object and each object contains name and link keys.

    Please note, you can create as much nested menus as you want. Just add subMenu object inside each menu item to created nested menus 

    
    
    var menuOption = {
        id: 'menu_1',
        mainMenuLabelSRText: 'Menu demo',
        brandLogo: {
            link: '#',
            content: 'Navbar'
        },
        menuList: [
            {
                name: 'Item 1',
                link: '#'
            },
            {
                name: 'Item 2',
                link: '#'
            },
            {
                name: 'Item 3 (Sub)',
                link: '#',
                subMenu: [
                    {
                        name: 'Space Bear 6',
                        link: '#'
                    },
                    {
                        name: 'Space Bear 6 Plus',
                        link: '#'
                    }
                ]
            }
        ]
    };

    window.addEventListener('load', function () {
        window.A11yWrapper('#menu_container').menu(menuOption);
    });

How to use Menu component multiple times

Menu can be positioned in multiple places while initiating the library. Also, multiple Menus can have different configurations as well. Below two ways, Menu can be called several times.

  • Using multiple ID.

    Call wrapper class multiple times for each distinctive ID. 

        
    
    var menuOption1 = {...},
        menuOption2 = {...};

    window.addEventListener('load', function () {
        window.A11yWrapper('#menu_container1').menu(menuOption1);
        window.A11yWrapper('#menu_container2').menu(menuOption2);
    });
  • Using same class for multiple elements.

    In below example, configuration object will be assigned sequentially. First object will be assigned to the first Menu and second object will be assigned to the second Menu. If only one configuration object is passed then both Menus will be built upon that single configuration object. 

        
    
    var menuOption1 = {...},
        menuOption2 = {...};

    window.addEventListener('load', function () {
        window.A11yWrapper('.menu-container').menu(menuOption1, menuOption2);
    });

Accessibility

Keyboard interaction for Top level menu

  • TAB/ SHIFT + TAB - TAB- Select the next focusable element. SHIFT + TAB- select previous focusable element.
  • RIGHT/ LEFT - RIGHT - Select next menu item . LEFT - Select previous menu item.
  • ENTER/ SPACE/ DOWN - Open the submenu level if exist and focus on first item.
  • UP - Open the submenu level if exist and focus on the last item.
  • HOME/ END - Pressing HOME takes to first menu item and END takes to last menu item
  • ESC - Set focus to Brand logo and release the focus trap which get created during RIGHT/ LEFT navigation occurs.
  • CHARACTER
    • Moves focus to next item in the menubar having a name that starts with the typed character.
    • If none of the items have a name starting with the typed character, focus does not move.

Keyboard interaction for Sub level menu

  • TAB/ SHIFT + TAB - Close the submenu. TAB- Select the next focusable item from Top menu. SHIFT + TAB- select previous focusable item from Top menu.
  • RIGHT/ LEFT - Close the submenu. RIGHT - Select next item from Top menu and if next Top Menu contains submenu then submenu get extended and first item receive focus. LEFT - Select previous item from Top menu and if previous Top Menu contains submenu then submenu get extended and first item receive focus.
  • ENTER/ SPACE/ DOWN - Open the submenu level if exist and focus on first item.
  • UP/ DOWN - DOWN - Move focus to next sub menu item. UP - Move focus to previous sub menu item.
  • HOME/ END - Pressing HOME takes to first sub menu item and END takes to last sub menu item
  • ESC - Close sub menu and select the current Top menu item.
  • CHARACTER
    • Moves focus to next item in the menubar having a name that starts with the typed character.
    • If none of the items have a name starting with the typed character, focus does not move.