Keyboard navigation: skip sub-items in horizontal menu?

Hi @danheisel, would you mind sharing your code ?

Adding the following JS to a custom theme should provide basic navigation: Tab to top menu item, Enter to open sub-menu, Tab to navigate in the sub-menu items, Enter to activate link.

You may have to adjust the selectors depending on your markup. For more info, see Add JavaScript to Your Theme or Module →

(function () {

  'use strict';

  /**
   * Provides basic keyboard navigation in the Main menu (desktop viewport).
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches the behavior for the keyboard navigation implementation.
   */
  Drupal.behaviors.responsive_menu_horizontal = {
    attach: function (context) {
      let horizontalMenu = document.querySelector('#horizontal-menu');
      if (horizontalMenu) {
        // Process main menu items with children.
        let menuItems = horizontalMenu.querySelectorAll('.menu-item--expanded');
        menuItems.forEach(function(item) {
          item.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
              e.preventDefault();
              e.stopImmediatePropagation();

              // Toggle visibility of sub-menu.
              let submenu = item.querySelector('.sub-nav');
              if (submenu && !submenu.classList.contains('submenu-open')) {
                submenu.classList.toggle('submenu-open');
              } else {
                // If no submenu or submenu is open, extract URL from the link and navigate to it.
                let link = item.querySelector('a');
                if (link) {
                  window.location.href = link.getAttribute('href');
                }
              }
            }
          });

          // Add event listener to sub-menu items.
          let subMenuItems = item.querySelectorAll('.sub-nav .menu-item');
          subMenuItems.forEach(function(subItem, index) {
            subItem.addEventListener('keydown', function(e) {
              if (e.key === 'Enter') {
                e.preventDefault();
                e.stopImmediatePropagation();
                
                // Extract URL from the link and navigate to it.
                let link = subItem.querySelector('a');
                if (link) {
                  window.location.href = link.getAttribute('href');
                }
              } else if (e.key === 'Tab' && index === subMenuItems.length - 1) {
                // If 'Tab' is pressed while in the last sub-menu item, close the sub-menu.
                let submenu = item.querySelector('.sub-nav');
                if (submenu && submenu.classList.contains('submenu-open')) {
                  submenu.classList.toggle('submenu-open');
                }
              }
            });
          });

        });
      }

    }

  }

})();