How to Create Dropdown Menus in 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.
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
Great tutorial, man. There were days that I was trying to use extend menu with Druppa, but only makes it clear. Thank you!
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?
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].
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?
Thank you! I was stuck with Bootstrap for weeks because of “Show as expanded”.
I want to know is it possible that when I click on a link I get that page associated with it as a dropdown.
nice
coooll
How can I place images to a menu item
Hi Nijil
You would have to custom theme the menu
Thanks
Daniel
How it work in drupa8?
Hi Swapna
If you like I can put together a new post on doing this in Drupal 8 for you
Thanks
Daniel