How to enable up and down arrow keys in bootstrap dropdown

Question

Bootstrap 3 panel title contains dropdown using code below. If dropdown is opened, up and down arrows do not move between items. How to enable dropdown navigation using up and down arrow keys ?

<div class="panel panel-success grid-panel-header">
    <div id='contentCaptionDiv' class="panel-heading">
        <div class="panel-title form-inline"> 
            <a class="btn" href="Show">
                <i class="fa fa-male" aria-hidden="true"></i>
            </a>
            <a class="btn" href="Delete">
                <i class="fa fa-female" aria-hidden="true"></i>
            </a>
        <div class="dropdown" type="button">
            <div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#"> 
                <i class="glyphicon glyphicon-cog"></i>
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
    panel content here
</div>

Answer 1

The reason that you code doesn't work is because you use a <div> for .dropdown-toggle.

Make it a <button> and it will work.

Strange enough, not even this kind of element works: span.btn.btn-default.

---

Another reason that do not apply to your case:

Make sure your <a> elements inside the <li>s have an attribute of href="#" or href="" (ir that the attribute exists, in general).

Answer 2

href="#" works indeed for arrow keys. Using this causes page 404 redirect on item select. If you are not looking to redirect to another page use this work around: href="javascript:" instead of href="#"