Bootstrap 5 navbar contains dropdown menus.
Dropdown menus have underlined hotkeys like a,n,s,e :
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
<li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
<li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
</ul>
</div>
How to activate menu item if key is pressed in keyboard? For example, if dropdowns menu is open, pressing A should act like Action menu item is clicked.
jsfiddle: https://jsfiddle.net/b6or2s5e/
Left and right arrows are already handled using
How to use left and right arrow keys to navigate in bootstrap navbar
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.dropdown').forEach(function (el) {
el.addEventListener('shown.bs.dropdown', function () {
document.addEventListener('keydown', function (e) {
const click = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window,
})
if (e.key === "ArrowRight") {
const o = getNextSibling(e.target.closest('.dropdown'), '.dropdown')
if (!o) {
document.querySelector('.dropdown-toggle').dispatchEvent(click)
} else {
o.querySelector('.Xdropdown-toggle').dispatchEvent(click)
}
} else if (e.key === "ArrowLeft") {
const o = getPrevSibling(e.target.closest('.dropdown'), '.dropdown')
if (!o) {
const ar = document.querySelectorAll('.dropdown-toggle')
ar[ar.length - 1].dispatchEvent(click)
} else {
o.querySelector('.dropdown-toggle').dispatchEvent(click)
}
}
}, { once: true })
})
})
})
How to add hotkey handling also?