Angular bootstrap dropdown toggle - navigate through keyboard arrow key

Question

I am using bootstrap's dropdown toggle directive. But I could navigate the menus thru mouse but not thru the keyboard arrow key. Please let me know how to navigate thru keyboard up/down arrow keys.

See this plunker: http://plnkr.co/edit/m5TBlkVMVJHVF69V2635?p=preview

Peter Davis · Accepted Answer · 2013-10-23 00:11:00Z

6

For Bootstrap dropdowns, the up/down arrows rely on being able to "focus" the anchors, which requires the href attribute be specified.

<ul class="dropdown-menu">
  <li ng-repeat="choice in items">
    <a href="javascript:void(0)">{{choice}}</a>
  </li>
</ul>

Note use of href="javascript:void(0)" instead of the usual href="#", because the latter will cause AngularJS to reload the page due to the route changing.

answered Oct 23, 2013 at 0:11

Peter Davis

7817 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kolhapuri Over a year ago

Solution proposed by Peter Davis works. Should be the accepted answer.

Collectives™ on Stack Overflow

Angular bootstrap dropdown toggle - navigate through keyboard arrow key

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related