Using <a> tag or <button> tag for dropdown menues | bootstrap

2388 views html
3

I'm a bit stunned by how my UX designer wants things. So I ask here...

We're using bootstrap in our project, and when we use dropdown downs 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="# ..

answered question

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

1 Answer

6

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" href="#">Action</button>
    <button class="dropdown-item" href="#">Another action</button>
    <button class="dropdown-item" href="#">Something else here</button>
  </div>
</div>

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

posted this

Have an answer?

JD

Please login first before posting an answer.