About This Demo
This page replicates a Bootstrap navbar structure using
.navbar-nav, .nav-item,
.nav-link, and .dropdown-menu /
.dropdown-item classes. Dropdowns are CSS hover-only
and inaccessible by keyboard. The overrideMenuItems
function extracts items using these Bootstrap-specific selectors.
Bootstrap Navbar with Dropdowns
⚠ Mouse OnlyPortal Component Fixes Code
Uses overrideMenuItems with Bootstrap-specific selectors (.navbar-nav, .nav-item, .dropdown-menu, .dropdown-item).
fixSiteMenu('#demo-nav-bootstrap')
.menuLabel('Site Menu')
.overrideMenuItems(function() {
var menuItems = [];
document.querySelectorAll('#demo-nav-bootstrap .navbar-nav > .nav-item').forEach(function(navItem) {
var subItems = [];
var dropdownMenu = navItem.querySelector('.dropdown-menu');
if (dropdownMenu) {
dropdownMenu.querySelectorAll('.dropdown-item').forEach(function(dropdownItem) {
if (dropdownItem.textContent && dropdownItem.textContent.trim()) {
subItems.push({
label: dropdownItem.textContent.trim(),
href: dropdownItem.getAttribute('href') || '#',
target: dropdownItem.getAttribute('target') || '',
level: 2,
children: []
});
}
});
}
var mainLink = navItem.querySelector('.nav-link');
if (mainLink && mainLink.textContent && mainLink.textContent.trim()) {
menuItems.push({
label: mainLink.textContent.trim(),
href: mainLink.getAttribute('href') || '#',
level: 1,
children: subItems
});
}
});
return menuItems;
})
How to Test (after AE JS is loaded)
- Press Tab to reach the trigger button.
-
Press Enter to open the menu. Items like
Features, Solutions, and
Resources have sub-items extracted from
.dropdown-menuelements. -
Dropdown dividers in the original markup are ignored — only
actual links (
.dropdown-item) are extracted. -
External links (like "GitHub") preserve
target="_blank"behavior. - Press Escape to close the menu.