| Drupal

No matter what CMS we're teaching, when we come to talking about themes and designs, one question always comes up quickly: "How do I make a dropdown menu"? Here's the answer to that question in Drupal.

First, we are going to show you how to get your menu set up correctly. Second we're going to give you three different options for showing that menu to your visitors.

Setting Up the Dropdown Menus

  • Go to Structure > Menus. Click list links next to the menu you'd like to use.
  • Click Add link and then create your link.
  • Pay close attention to two options further down the page:

- Enabled. Check this box.
- Parent link. If you want this link to dropdown under another, here is where you choose the top-level link. In this example below, the link will drop down from under Home.


When you're done, you'll see that the sub-links are indented under the top-level links.


If you're going to put dropdown links under existing menu links, don't forget to also open up those existing links and check the Show as expanded box.

Option 1: Using a Theme with Dropdown Menus


One thing that confuses some Drupal beginners is that not all themes have dropdown menus. In fact, none of the default Drupal 7 themes do so Bartik, Garland and Stark would not be the right choice in this case.

For example, the main menu bar of the default Bartik theme will always look like the image above. And if you try to place the menu in a block, you'll only get an indented link as in the image below.


To get an easy-to-use dropdown menu you'll need a theme such as Marinelli: http://drupal.org/project/marinelli. Each theme will be slightly different in how the dropdown menus are setup but Marinelli is a good example.


Install Marinelli and make it the default theme on your site.

Under the Apperance tab, click Configure next to Marinelli and scroll down. Under Primary Menu Settings, select Mega Drop Down.


Now when you check your site, you'll have working dropdown menus as in the image below.


Option 2: Use a Module

A second way to get dropdown menus on your Drupal site is to use a module. Nice Menus is very common choice and then one we'll use in this tutorial: http://drupal.org/project/nice_menus. Another very popular choice is Superfish http://drupal.org/project/superfish.


Install the Nice Menus module and enable it.

Go to Structure > Blocks and place one of the two Nice Menu blocks into a region of your site.


You can also click Configure next to one of the Nice Menu blocks and you'll be able to take some control over the menu settings.


Once the menu is live on your site, it will look like the image below.


You might not want the menu in the sidebar as in this example, so check to see which regions are available to you in current theme. Go to Structure > Blocks > Demonstrate block regions and you'll see your choices:


Option 3: Change the Code of Your Theme

Finally, if you have some coding knowledge, you can modify the theme that you're using to include dropdown menus.

The quickest way to do this would be to take advantage of one of the modules mentioned in Option 2 such as Nice Menus or Superfish.

Here is one step-by-step example of how you can add a Superfish dropdown menu to the Bartik theme: http://drupal.org/node/1073298.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.