30

I've been looking at Twitter's Bootstrap framework and I'm really impressed. However, I don't understand the thinking behind the way the dropdown navigation menu works.

Firstly, in order to see child links, you have to click on the parent. I can see the benefits of this, but why not have the more traditional dropdown on hover approach as the default?

Secondly, it seems that the thinking behind the Twitter Bootstrap's dropdown menu illuminates parent pages. I'm probably not explaining that very well... Say, you have a simple web page structure:

  • Home
  • About
    • The Team
  • Services
    • Web Design
    • Hosting
    • Domains
  • Contact

In a traditional dropdown menu structure, you'd hover over "about" and "services" and the dropdown menu containing the child links (eg "Web design", "Hosting" etc.) would appear. However, you would also be able to click on the parent page (i.e. "About" and "Services") and visit them.

With Bootstrap you can't have a parent page in the structure, you have to use the anchor tag ("#"). When you click this, you then see the pages in the dropdown. This is no good if there is a parent page. It's also not great from a semantic (what does "#" mean?) and accessibility (javascript turned off, screen readers etc) point of view.

I've probably missed something, but can someone explain the thinking behind this particularly in regards to parent pages and semantic html/accessibility?

iagdotme
  • 1,033
  • 2
  • 21
  • 38
  • 1
    You will only receive answers based on opinion on this subject matter so to get a straight answer why not contact the main developers of the bootstrap? Here are the twitter handles of the developers: [@mdo](http://twitter.com/mdo), [@fat](http://twitter.com/fat). – Andres I Perez Feb 24 '12 at 18:32
  • I'm definitely interested in the main developers opinion, but also interested in other people's views and how people are using the Bootstrap nav bar in the case I highlighted above. – iagdotme Feb 24 '12 at 21:00

3 Answers3

22

It has been done this way simply because hover menus do not work well on touch screen devices.

https://github.com/twitter/bootstrap/issues/1029

Chris Foster
  • 1,310
  • 11
  • 13
  • 1
    Thanks. The comment on github basically answers the question. I can see the major advantages when using the same menu on a mobile as you can't see a dropdown on hover by clicking on a mobile. However this doesn't resolve the accessibility and semantic issues I raised above. I'll contact Mark Otto about this as he mentioned this post on his blog! – iagdotme Feb 27 '12 at 22:13
1

The design decision was done by the folks at Twitter see http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

If you look at the number of people that look for a solution to get hover back (some 1000 positive/ some 700000 fews as of 2017-11):

How to make Twitter Bootstrap menu dropdown on hover rather than click

you can see that the decision is not making everybody happy. Especially if you migrate web pages that have had hover menus for many years it's awkward to be "forced" to a new style by some framework.

Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
0

There are many CSS and js hacks out there for this functionality, but all of them is breaking something.

I am against using hover, but if someone really needs that, then do it properly. I made a plugin which is using only the Bootstrap javascript API without any hack, so it works on all devices, without braking the usability:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

István Ujj-Mészáros
  • 3,228
  • 1
  • 27
  • 46