I'm working on a Bootstrap site and having difficulties figuring out the best solution for structuring the nav. There will be about 5 top level items, each with their own subpages accessible through dropdowns. Research seems to point to click being the better way to access those dropdowns instead of hover. Problem with that for me is that it changes the functionality of the top level nav items from linking to their respective pages, to instead opening the dropdowns.

So for example, if I have this...

1.0 - Products

  1. Product 1
  2. Product 2
  3. Product 3

Is there any way to have that 1.0 - Products link control the dropdown but also click through to the Products page? I'd rather not have to resort back to hovering or creating a Mega Menu and inserting clickable section headers. I can just put in an Overview page as the first dropdown item, but again, would rather not have to resort to that. Any ideas, examples, reading on this would be appreciated.

  • is this a technical question ? if so it doesn't belong on UX, it should be on StackOverflow
    – Toni Leigh
    Oct 28, 2013 at 22:18
  • I'm sure this is a question that others have faced and figure potential solutions are more likely to come from UX thinking as opposed to technical thinking.
    – Jeff
    Oct 28, 2013 at 22:23
  • There are a few questions on here about similar issues. Such as this one as well as the ones in the 'Related' section over there ---->
    – JonW
    Oct 29, 2013 at 16:26

3 Answers 3


To solve this for navigation elements that have children, add an additional element to the navigation element for the user to interact with to "expand" the menu:


download bmml source – Wireframes created with Balsamiq Mockups

In this example, clicking on "Set Amet" would navigate you to that page. Clicking on the down arrow would expand the sub-menu.


One way of doing it could be to break the problem into 2 individual tasks: 1. Specific pages for each top level items which are directly accessible 2. Dropdown for quick jump to sub-sections or subpages which are also directly accessible

To achieve this, you could probably have top level items clickable which would directly always take user to top level item pages. In addition, you could have some sort of small indicators against each top level items, say a small down arrow or a light plus sign or something that will act as a separate click area. Clicking this will open the submenu to show all sub-items. This way, you could have both top level items upfront as well as have a direct way of opening the submenus without cluttering the nav area.


I would disagree on the way of doing it with @djagatram.

As far as I know, there's no clean solution to your problem. That's because all the links inside list item with dropdown class will have their action muted by e.preventDefault() and e.stopPropagation().

You could try removing these parts of the code, or attaching a custom click handler for your dropdowns, but these are all hacks, and go against both semantics and consistent behavior across devices.

I think, however, that your problem might be laying elsewhere. There's a reason for that behavior and structure of menus in Bootstrap. I think making one element, or its part to redirect you to a page, and other part of it let you unfold a set of pages is not the best idea, especially on lower resolutions, where one would have to aim to tap the proper part of the element.

What I would suggest instead is to re-think your content structure and page naming, because perhaps, you don't really need the topmost elements to be links. It could be also, that they don't need to be a dropdowns (especially on devices with lower resolutions)

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.