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>

maybe this can help you: http://stackoverflow.com/questions/15720107/how-to-make-bootstrap-button-dropdown-menu-selectable-by-keyboard — Luca_Rosario_Pappa, Aug 29 '15 at 14:31
Adding `role='menu'` allows only donw arrow key to activete first dropdown item. Pressing up and down arrow keys after does not have any effect — Andrus, Aug 29 '15 at 15:20
@Andrus You probably have something interfering with Bootstrap. This should work. Take a look here: http://jsfiddle.net/damphat/WJS9p/. Make sure you allow focus on the button (and probably on the subitems). — NoOne, Oct 09 '15 at 18:05
One crazy reason I have found for this not to work is to omit the `href="#"` on the `

NoOne · Accepted Answer · 2015-10-13T16:01:38.487

5

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).

edited Oct 13 '15 at 16:01

answered Oct 09 '15 at 20:43

NoOne

3,851
1
40
47

score 2 · Answer 2 · answered Oct 03 '17 at 15:37

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="#"

answered Oct 03 '17 at 15:37

Alain

21
2

score 0 · Answer 3 · answered Aug 29 '15 at 16:22

<script type="text/javascript">
$(document).keydown(function(e) {
  if(e.which == 40 || e.which == 38) {
    openNavbar = $(".dropdown.open");
    if(openNavbar[0]) {
      menu = openNavbar.children(".dropdown-menu");
      menu.find("a").css("outline", "none"); // remove the pesky blue outline
      hovered = menu.find("li:hover");
      if(hovered[0]) {
        if(e.which == 40) hovered.next().children().focus();
        else hovered.prev().children().focus();
      }
      else menu.find("li").first().children().focus();
    }
  }
});
</script>

I haven't found a built in solution, but I have made a snippet, that seems to do the job.

How to enable up and down arrow keys in bootstrap dropdown

3 Answers3