Using the Superfish dropdown menu in Drupal 8

Superfish is a smart and flexible module for creating nice, responsive and flexible dropdown menus. With just a few clicks, you can get everything set up.

Alright, let’s see how we can get this done and set it up to work just the way we want it by following these steps:

• Go to the ‘Superfish’ project page on drupal.org (https://www.drupal.org/project/superfish), and download both the Drupal module and the javascript library from the links on the page.
• Unzip the downloaded JS library and rename the top-level directory to ‘superfish’. Then move the folder to your Drupal 8 /libraries directory.
• Extract the superfish Drupal module into D8 /libraries directory.
• Proceed to your Drupal site and enable superfish. From the admin menu, click Extend, search for ‘superfish’, click the checkbox to enable, then press the Install button.

To create a superfish menu, you must create a superfish block instance in the region where you want the menu to appear.

• Go to block layout (Structure > Block layout). Click place block in any of the desired regions to add a superfish block.
• From the pop-up window, locate blocks with category ‘superfish’.
• Click place block next to the desired block.
• Adjust settings in the Configure block window. Most times the default settings are adequate.
• Click Save block to apply block settings

You can now browse to your front page and confirm that your superfish menu is fully functional.

If it doesn’t work properly, ensure that the JS library is located in the correct folder and is correctly named.

First published in kodehauz