javascript - with - keyboard accessible drop down menu

How to make bootstrap button dropdown menu selectable by keyboard (2)

Bootstrap button dropdown:

When i select a button dropdown, i would like to use keyboard up/down to navigate between menu items and press enter to select one, just like

Any ideas?

Bootstrap has native support for keyboard navigation.

Just add role="menu" to your dropdown-menu

Here is an example, just save as .html and take a test

  <link href="" rel="stylesheet">
  <script src=""></script>
  <script src=""></script>
  <div class="btn-group">
    <button class="btn btn-default">1</button>
    <button class="btn btn-default">2</button>
    <button class="btn btn-default">3</button>
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">menu</button>
      <ul class="dropdown-menu" role="menu">
        <li> <a href="#">one</a> </li>
        <li> <a href="#">two</a> </li>
        <li> <a href="#">three</a> </li>

Possible reasons that this may not work in some cases:

  • Because you use a <div> or a <span> for .dropdown-toggle. Make it a <button> and it will work. Strange enough, not even this kind of element works: span.btn.btn-default.
  • Make sure your <a> element inside each <li> have an attribute of href="#" or href="" or generally has the attribute defined.
  • Make sure you have the role="menu" on the .dropdown-menu element.