Create Dropdown Menus using Superfish in Drupal 8

The Superfish module allows you to create multi-level dropdown menus in Drupal 8. The module uses the JavaScript Superfish library to create and display a Superfish menu block for each menu available on your site.

With a few configuration options, you can control how it’ll behavior on mobile, turn multi-column menus, change the styling and more.

The module does come with a few styling options but you’ll have to style it yourself to match your theme. When you configure Superfish the first time the dropdown functionality will, however, it may not look good.

In this tutorial, you’ll learn how to install the module and how to configure it.

Let’s start!

Getting Started

It’s recommended that you install the module using Composer. This way Composer will automatically download the required library.

composer require drupal/superfish

If you don’t want to use Composer then you’ll need to manually download the library and extract it into the libraries directory in your Drupal site. View the Installation section on the project page for more details.

After downloading, enable the module either by clicking the module’s checkbox in the Extend Page or using Drush.

drush en superfish -y

Create Menu

As an example, let’s create a site with a 4 level menu. Superfish is capable of handling unlimited menu levels.

1. Click Structure, Menus and click the “Edit menu” button besides the “Main Navigation” menu.

2. Click the “Add link” button to add a menu item and make sure you mark the “Show as expanded” checkbox, if the menu item will contain children.

3. Click the Save button each time you create a menu item and repeat the process for the whole menu structure. At the end you should have something like this:

Configure Superfish Menu Block

It’s time to get rid of the default menu block and place the Superfish menu block in one of Drupal’s regions.

1. Click Structure, “Block layout”. Look for the “Primary menu” region, click the dropdown button by the “Main Navigation” block and choose Remove. Confirm by clicking the blue Remove button.

2. Now click “Place block” in the “Highlighted” region, type the word main in the search box and click “Place block” by the Superfish “Main navigation” block.

Let’s review the settings one by one.

• Uncheck the “Display title” option. This is Drupal’s default block configuration.
• “Menu levels” option lets you configure the display of the menu and the number of levels permitted. Leave these options untouched.
• “Block settings” area contains configuration about the menu appearance and its basic behavior.
• “Menu Type” “Horizontal (double row)” shows the first and second level menu items in a horizontal display.
• “Vertical (stack)” option is the right choice if you want to place the menu in one of the sidebars for example.
• The style option lets you choose a menu with some predefined styles.
• The “Slide in” effect option is there to configure the dropdown functionality of all submenus. You can install the jQuery Easing library (read the module’s documentation) if you want to have more options here.

• The “Superfish plugins” area deals with the display of the dropdown menus in the browser and on small screens, take a look at the possibilities, but generally speaking you won’t need to change this options, leave the default options. Pay attention to the Supersubs area, you can define here the width of your submenus.

• In the “Advanced Settings” area, you can control the animation speed of the Superfish menu, some hyperlink properties and you can also add custom CSS classes to the menu components.

Create Multi-column Menus

It is possible to create multi-column menus with the Superfish module, however you have to have a specific menu structure to achieve this.

Just check “Enable multi-column sub-menus” in order to use them.

Summary

The Superfish module allows you to build dropdown and multi-column menus and place them in your Drupal site in an easy way. But you’ll still need to spend some time styling the menus to match your theme.