Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughDropdown Menus in Drupal 8 with the Superfish Module
If you want to build a large, multi-level drop-down menu in Drupal 8, then the Superfish module is a great choice.
The Superfish module makes use of the jQuery Superfish menu plugin, which is useful for multi-level drop-down menus. Superfish has more features than most dropdown menus. It supports touch devices and keyboard interaction.
In this tutorial, we’re going to create a menu for a sports news site with three menu levels.
Step #1. Install the module and libraries
First, let's install the module:
Now, let's install the libraries:
- Download the Superfish library 2.x for Drupal 8.x.
- Uncompress it to your [DRUPAL_ROOT]/libraries directory. If you don’t have the libraries directory yet, please create it
- Download the jQuery Easing plugin (optional but recommended)
- Uncompress it too to your [DRUPAL_ROOT]/libraries directory.
- Rename both directories, so that you have the following file/folder structure:
Step #2. Create the menu structure
- Go to Structure > Menus.
- Click the Add menu button:
- Enter the menu title and click the Save button:
Step #3. Add the menu links
- Once the menu has been added, click the Add link button to create the menu links:
- Create the menu links according to the predefined structure. Notice that you have to link each menu item to a piece of content.
- Click on the Show as expanded checkbox, so that the menu will appear expanded if it has children.
- Click the Save button each time you create a menu item.
Once you have created all the links:
- Use the handles to drag and drop the items in order to match the menu structure
- Click Save:
Step #4. Place the menu
Menus in Drupal 8 are rendered as block entities.
- Click Structure > Block layout.
- Search the Primary menu region and disable the Main navigation default block.
- Click the Place block button.
- Enter the name of your menu in the search box. You will find two “News site” menus.
- Click the Place block button on the line with the Supefish category.
Step #5. Finalize the Superfish configuration
- Uncheck the Display title checkbox:
There are several configuration options in this window. Particular attention deserves the Slide-in effect provided by the jQuery Easing plugin (which you downloaded at the beginning) and the ADVANCED SETTINGS where you can configure for instance the animation speed. Play with this options until you find the ones to your liking.
- Click Save block and go to your homepage. You will have a multi-level drop-down menu now!
You have to tweak it with your own CSS, but the main menu functionality is there:
I hope you enjoyed reading this tutorial and making your own Superfish menu. Please leave your comments below.
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web