How to Create Dropdown Menus in Drupal

tutuploadsmedia_1328643949622.png

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

tutuploadsmedia_1328643949622.png
  • Go to Structure > Menus. Click list links next to the menu you’d like to use.

tutuploadsmedia_1328644328522.png
  • 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.

tutuploadsmedia_1328644380136.png

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

tutuploadsmedia_1328645783324.png

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

tutuploadsmedia_1328646997914.png

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.

tutuploadsmedia_1328645760427.png

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.

tutuploadsmedia_1328644936117.png

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.

tutuploadsmedia_1328645228108.png

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

tutuploadsmedia_1328645302561.png

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.

tutuploadsmedia_1328645453517.png

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.

tutuploadsmedia_1328645725343.png

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.

tutuploadsmedia_1328645886530.png

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

tutuploadsmedia_1328645941153.png

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:

tutuploadsmedia_1328646054907.png

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.

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
san

Nice tutorial. I was searching for a solution to the Mega drop down menu, reached this page. My question is, lets say you have 20 items in that Mega drop down menu(Home). How can you separate the items in 3-4 columns(similar to this: [url=http://megadrupal.com/blog/7-mega-menu-modules-for-drupal)]http://megadrupal.com/blog/…[/url]. I couldn’t find any solution to this.

Thank you,

San

betto

Great tutorial, man. There were days that I was trying to use extend menu with Druppa, but only makes it clear. Thank you!

treedhe

nice info i got here thx..but btw i use marinelli theme drupal 7and my question is how to make dropdown menu view right… because it automaticaly view left and some text (child link) come out to the border and cannot be read?

tomas

Hi i install Marinelli theme, It’s great work. But I have a little problem.

Sometimes show error message

Notice: Trying to get property of non-object v marinelli_preprocess_comment() (riadok 204 z /data/w/e/[url=http://websteps.sk/sub/fights/sites/all/themes/marinelli/template.php)]websteps.sk/sub/fights/site…[/url].

Warning: array_flip() [function.array-flip]: Can only flip STRING and INTEGER values! v DrupalDefaultEntityController->load() (riadok 178 z /data/w/e/[url=http://websteps.sk/sub/fights/includes/entity.inc)]websteps.sk/sub/fights/incl…[/url].

Notice: Trying to get property of non-object v marinelli_preprocess_comment() (riadok 204 z /data/w/e/[url=http://websteps.sk/sub/fights/sites/all/themes/marinelli/template.php)]websteps.sk/sub/fights/site…[/url].

Warning: array_flip() [function.array-flip]: Can only flip STRING and INTEGER values! v DrupalDefaultEntityController->load() (riadok 178 z /data/w/e/[url=http://websteps.sk/sub/fights/includes/entity.inc)]websteps.sk/sub/fights/incl…[/url].

Will

This is nice but I can’t get it to replace the default menu in Marinelli. I want the default menu to have this style to it. How do I do that?

mpegyna

Thank you! I was stuck with Bootstrap for weeks because of “Show as expanded”.

kushal

I want to know is it possible that when I click on a link I get that page associated with it as a dropdown.

dhiren mishra

nice
coooll

Nijil

How can I place images to a menu item

daniel-pickering

Hi Nijil
You would have to custom theme the menu
Thanks

Daniel

Swapna

How it work in drupa8?

daniel-pickering

Hi Swapna
If you like I can put together a new post on doing this in Drupal 8 for you
Thanks

Daniel

12
0
Would love your thoughts, please comment.x
()
x