About This Demo
This page features a complex multi-level navigation with 3 levels of
nesting, inactive category headers (items without
href that use <span> instead of
<a>), and external links. The
a11y-site-menu handles unlimited nesting depth and
properly distinguishes clickable links from non-interactive category
labels.
Multi-Level Navigation
⚠ Mouse OnlyPortal Component Fixes Code
Copy the code below into the AudioEye portal backend tool for this page. Uses overrideMenuItems because the menu contains non-link <span> category headers.
fixSiteMenu('#demo-nav-complex')
.menuLabel('Main Navigation')
.overrideMenuItems(function() {
var items = [];
var nav = document.querySelector('#demo-nav-complex');
if (!nav) return items;
nav.querySelectorAll(':scope > ul > li').forEach(function(li) {
var link = li.querySelector(':scope > a');
var span = li.querySelector(':scope > span.nav-label');
var label = link ? link.textContent.trim() : (span ? span.textContent.trim() : '');
if (!label) return;
var href = link ? link.getAttribute('href') || '#' : '#';
var target = link ? link.getAttribute('target') || '' : '';
var children = [];
var dropdown = li.querySelector(':scope > ul.dropdown');
if (dropdown) {
dropdown.querySelectorAll(':scope > li').forEach(function(subLi) {
var subLink = subLi.querySelector(':scope > a');
var subSpan = subLi.querySelector(':scope > span.nav-label');
var subLabel = subLink ? subLink.textContent.trim() : (subSpan ? subSpan.textContent.trim() : '');
if (!subLabel) return;
var subHref = subLink ? subLink.getAttribute('href') || '#' : '#';
var subTarget = subLink ? subLink.getAttribute('target') || '' : '';
var grandChildren = [];
var subDropdown = subLi.querySelector(':scope > ul.dropdown');
if (subDropdown) {
subDropdown.querySelectorAll(':scope > li').forEach(function(gdLi) {
var gdLink = gdLi.querySelector(':scope > a');
if (!gdLink) return;
grandChildren.push({
label: gdLink.textContent.trim(),
href: gdLink.getAttribute('href') || '#',
target: gdLink.getAttribute('target') || '',
level: 3,
children: []
});
});
}
children.push({
label: subLabel, href: subHref, target: subTarget,
level: 2, children: grandChildren
});
});
}
items.push({
label: label, href: href, target: target,
level: 1, children: children
});
});
return items;
})
How to Test (after AE JS is loaded)
- Press Tab to reach the trigger button.
- Press Enter to open the menu. Notice the hierarchical structure with indentation.
- Items like "Products" and "Software" are category headers (no link) — they render as non-clickable labels in the accessible menu.
- Sub-items are indented to show hierarchy. Arrow buttons expand and collapse sub-levels.
- External links (like "W3C WAI") are announced by screen readers and open in a new tab.