Skip to content Skip to navigation

Menu Tricks #4: Menu Block with Bootstrap Dropdowns

Earlier this year, I wrote a blog post about using Menu Block module. In this post, I'll talk about how Menu Block integrates with Stanford's Drupal 7 themes to create dropdown menus.

To properly leverage the dropdowns in Twitter Bootstrap with Drupal, there are a few things to keep in mind...

Note: This post pertains to these Drupal 7 themes:

  • Open Framework
  • Stanford Framework
  • Stanford Wilbur
  • Stanford Jordan

Menu Block module to wrangle dropdowns

If you've been following the Menu Tricks blog series, you'll know that I'm a supporter of placing all menu items into one giant menu, which sets you up to have a dropdown menus (and many other great things that you can see in the Menu Tricks series), but puts you in the position of having additional pop-ups for items that are three levels down in your menu or more.

Here at SWS, we think that in most cases dropdowns should only ever display one additional level of menu items. Otherwise you risk what I like to call Navigation Overload: things like flyouts, with which even the handiest mousers struggle.

To constrain your menu items to just the top navigation and a single-level dropdown, you can use Menu Block module. Here are the settings your Menu Block will require:

  • Use the Main Menu to build the block
  • Start at the primary level in the menu
  • Make the maximum depth 2
  • Place this new menu block into your Navigation region

Configuring menu items to expose dropdowns

There is an additional step required to make your dropdowns work. Dropdowns use javascript to hide the sub-items in your menu until someone clicks on the top level item, which means that those items need to be expanded in the code at all times. Otherwise the dropdowns won't know that there are any items to display.  

To expand all of your top level items to make those links available to the dropdowns:

  • navigate to your Main Menu list of links (/admin/structure/menu/manage/main-menu).
  • Edit each of your top level menu items
  • Check Show as Expanded

Dropdowns on click, not on hover: Top-level items are no longer pages

Historically, it's been very common to see dropdowns on hover, meaning that the menus expand when a mouse hovers over the top-level menu item. However, because it's very common for people to visit a website on a mobile device or tablet, it's becoming standard for dropdowns to open when someone clicks (or taps) on the top-level menu item. Dropdowns on click/tap is how the Stanford Drupal themes have been configured.

The primary ramification of dropdowns on click is that top level items are no longer pages. There are various ways you can work around having top-level items be links only and not navigable pages. The way Web Services is now configuring our websites that use dropdowns is thus:

Blank pages that redirect to the first subpage

Because Web Services likes to use pages to automatically build our URLs, we like to build pages for our top level items and then redirect them using the Redirect module to the first page in the second level of the menu. You can see that in action at undergrad.stanford.edu.

If you have other ways you've worked around top level items being links not pages, feel free to leave a comment about your approach!

 

Categories: 

Comments

Hi,

Thnx for this series. Full of chewy, chocolaty menu goodness.

A request. Would you write about tree menus, as created by the book module? What is the best user experience?

Thnx again,
Kieran

Thanks for your comment. That's a great idea. I'll add it to my future blog posts. Usually I write about things I'm encountering in client projects, and I'm sure it'll come up before too long!

Hi,

i would also be interested in code how to create a mega menu in bootstrap 3.

Thanks for your comment. My team doesn't have any experience using Megamenu with Bootstrap. I did find this post that looked promising on drupal.org: https://groups.drupal.org/node/301648

Good luck and post back here when you find a solution!

I had good luck with a Bootstrap-compatible megamenu called YAMM (Yet Another MegaMenu). Google it to learn more. It integrates nicely with Bootstrap's own navbar.

I had good luck with a Bootstrap-compatible megamenu called YAMM (Yet Another MegaMenu). It integrates nicely with Bootstrap's own navbar. http://geedmo.github.io/yamm/