About This Demo
This page simulates a typical WordPress theme navigation structure
using .menu, .menu-item, and
.sub-menu classes. WordPress menus often have deeply
nested <ul> elements with these specific class
names. The overrideMenuItems function extracts the
hierarchy using WordPress-specific selectors like
:scope > .sub-menu.
WordPress Theme Navigation
⚠ Mouse OnlyPortal Component Fixes Code
Uses overrideMenuItems with WordPress-specific selectors (.sub-menu, .menu-item).
fixSiteMenu('#demo-nav-wp')
.menuLabel('Site Menu')
.overrideMenuItems(function() {
var menuItems = [];
function extractWPItems(container, level) {
level = level || 1;
var items = [];
var menuList = container.querySelector(':scope > ul') || container.querySelector('ul') || container;
if (menuList) {
menuList.querySelectorAll(':scope > li').forEach(function(menuItem) {
var mainLink = menuItem.querySelector(':scope > a');
if (mainLink && mainLink.textContent && mainLink.textContent.trim()) {
var subItems = [];
var subMenu = menuItem.querySelector(':scope > .sub-menu');
if (subMenu) {
subItems = extractWPItems(subMenu, level + 1);
}
items.push({
label: mainLink.textContent.trim(),
href: mainLink.getAttribute('href') || '#',
target: mainLink.getAttribute('target') || '',
level: level,
children: subItems
});
}
});
}
return items;
}
var mainNav = document.querySelector('#demo-nav-wp');
if (mainNav) {
menuItems = extractWPItems(mainNav, 1);
}
return menuItems;
})
How to Test (after AE JS is loaded)
- Press Tab to reach the trigger button.
- Press Enter to open the menu. Notice the 3-level hierarchy: Shop → Clothing → Men's/Women's/Kids.
- Use Tab or ArrowDown/ArrowUp to move between items. Arrow toggle buttons expand sub-levels.
- Press Escape to close the menu.