Who love to Drupal

How to Create Dropdown Menus in Drupal

Posted by drupallovers on March 30, 2012

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: