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.
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
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.
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.
8 thoughts on “Create Dropdown Menus using Superfish in Drupal 8”
Thanks – this is a useful tutorial for a good module.
I also recommend that, if you’ve got the ability to compile SASS/SCSS in your environment, grab the sample SCSS file. It makes theming the menu a *lot* easier:
Thanks for the tip.
Somewhere between Drupal 8.4 and 8.7.8 the Superfish menu became difficult to style properly. The problem is with the width of the entire menu bar. It no longer goes all the way across the page like the built in Drupal menu does. Does anyone else have this problem? I can’t solve it.
Not really sure what the problem could be.
I guess I got to give the containing div a height (2.5em). It then goes across the entire page.
Buenos Dias, Jorge,
I have a problem with my Superfish menu when it is changed to acordeon style for small viewports. I cannot get parents with children (altogether only 2 levels) to expand the children. Only the top level gets displayed. This works when I “switch-off” the class “sf-hidden” in the css of the Superfish library. I have played around with the various plugin-settings, but cannot get to the bottom ogf it. The menu displays ALL levels correctly for bigger screens. Any ideas?
Regards from Salzburg, Austria
I haven’t used superfish in a long time. Best to ask in the issue queue. https://www.drupal.org/project/issues/superfish?categories=All