← All Demos

Basic Navigation Menu

About This Demo

Below is a typical horizontal navigation bar with CSS hover-based dropdown menus. It only responds to mouse hover — keyboard users cannot open the dropdowns or navigate sub-items. When AE JS is loaded, it detects this pattern and applies the a11y-site-menu component to add a keyboard-accessible trigger button and overlay menu with full ARIA support.

Navigation with Hover Dropdowns

⚠ Mouse Only

Portal Component Fixes Code

Copy the code below into the AudioEye portal backend tool for this page.

fixSiteMenu('#demo-nav') .menuLabel('Main Navigation')

How to Test (after AE JS is loaded)

  1. Press Tab to navigate to the trigger button that appears before the navigation. It reads "Main Navigation".
  2. Press Enter or Space to open the accessible menu overlay.
  3. Use Tab or ArrowDown/ArrowUp to navigate through menu items. Submenus are expanded inline with arrow toggle buttons.
  4. Press Escape to close the menu.
  5. Shortcut: Alt(Option)+M toggles the menu from anywhere on the page.