Spice up your Drupal 8 menus with the Superfish module

Let’s talk about secret ingredients in menus. Like the right spices, they create special flavours that your guests really enjoy. When it comes to your Drupal website menus, the recipe is simple: just add some jQuery! Using the Superfish Drupal module, which integrates the jQuery Superfish menu plugin, you can create interactive multi-level menus with exceptional usability features. Let’s see how it works on Drupal 8’s example.

The Superfish Drupal module and its special menus

Drupal core provides easy ways to create multi-level drop-down menus with great customization opportunities. However, the Superfish module goes even further and brings menu interactivity to the next level.

The Superfish offers great web accessibility enhancements, which are so important for Drupal 8’s philosophy. Superfish menus are available to screen readers. They are keyboard accessible and touch-screen compatible.

These menus can automatically adapt their width to that of smaller screens. It’s also possible to make multi-column sub-menus, aka megamenus. The Superfish module also supports RTL (right-to-left) writing.

The “easing” effects by the jQuery Easing plugin are designed to make the animation more realistic.

And this is far from being the full list of the module’s benefits. So let’s move on to the practical part and create a menu with the help of the Superfish.

Creating a Drupal 8 menu with the Superfish module

Get the dependencies

First, let’s get the required dependencies for the module’s work.

• Download the JavaScript library called Superfish library 2.x and place in the libraries directory of your Drupal root folder. Rename the folder to “Superfish”.
• Optionally, you can also download the jQuery Easing plugin and unzip it to the libraries directory as well. The folder should be named “Easing”.

Get the Superfish module

With the dependencies installed, the way is paved for downloading and enabling the Superfish module on your Drupal 8 website.

Get your menu

You will need a menu to work with. To create one, go to “Structure” — “Menus” and click “Add menu”. Create the menu structure and then fill it with links leading to pieces of content. Check “Show as expanded” if the menu items have children links. Click save after each new change.

When the menu is ready, click “Structure” — “Block layout,” choose the place for your menu on your Drupal website, find your menu marked with the “Superfish” category on the list, and click “Place block”.

Make your Superfish settings

• The “Configure block” window has plenty of settings to your liking. Here are some of the most interesting ones.
• Your options for the menu type are horizontal, vertical, or “NavBar”.
• Black, blue, coffee, white, or none will be your menu style choices.
• You can also choose to add arrows or drop shadows.
• Define your animation speed as slow, normal or fast.
• The mouse delay is how long the menu stays open when the mouse hovers away.
• You can configure the slide-in effects created by the jQuery Easing plugin.

And there are lots of other options related to touchscreens, smallscreens, multi-column submenus, extra CSS classes, and more.

Final thoughts

There is always a way to implement all your ideas about menus. Our developers will help you configure the Superfish or other Drupal 8 modules, or create custom ones specifically for you. Your guests have no chance to stay indifferent to your website — they will enjoy their navigation due to the attractive and interactive menus!