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
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!