3

We're using bootstrap in our project, and when we use dropdown we are asked to change our menu items from <a href="#" .. to <button> instead. Even tho the documentation for bootstraps use <a href ..

https://getbootstrap.com/docs/4.0/components/dropdowns/

I've asked the UX designer, and it has some issues with focus tabbing, like. when you tab through elements.

Is there any other compelling reason to use <button> over <a href="# ..

2
  • 1
    depends on the semantics I guess - if you are binding an onclick and the click goes nowhere but opens a drop down, then I guess a button is more semantically correct, if you are using it to link to another part of the page or somewhere else, then an anchor would be correct - both should be able to be tabbed to though
    – Pete
    Nov 5, 2018 at 11:54
  • 'a' tag is supposed to link somewhere - other page or section on the page. That's why in js it needs preventDefault() to suppress this behaviour on click event. But 'button' tag doesn't need that, hence button makes a bit more sense for dropdown. Nov 5, 2018 at 12:31

1 Answer 1

3

You can easily use buttons in a dropdown, too:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <button class="dropdown-item">Action</button>
    <button class="dropdown-item">Another action</button>
    <button class="dropdown-item">Something else here</button>
  </div>
</div>

Working example: https://www.bootply.com/NTH6FzGx4A

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.