How to Create Dropdown Menus using Drupal Superfish Module?

Navigating a website with a poorly designed menu can be frustrating. Users often struggle to find what they need, leading to increased bounce rates and decreased engagement. This issue can particularly happen on complex sites with multiple sections. The lack of intuitive navigation can result in a negative user experience, affecting your site’s overall performance.

So, what’s the solution? Drupal Superfish module. It allows you to create advanced dropdown menus for enhancing navigation and improving user experience.

In this blog, we’ll guide you through the process of creating dropdown menus using the Drupal Superfish module. We’ll also learn how Drupal development experts create custom dropdown menus with best practices followed. With that said, let’s get started!

What is the Use of Drupal Superfish Module?

Drupal Superfish module is a powerful tool used to enhance the functionality and appearance of menus in a Drupal website. Its primary use is to create advanced dropdown and flyout menus that improve navigation and user experience.

Superfish module integrates the jQuery Superfish menu plugin into Drupal, allowing users to create touch-enabled and mobile-friendly dropdown menus with ease. It enhances standard Drupal menus by adding advanced features like:

• Dropdown Menus: These menus are accessible via touchscreens and keyboards, ensuring usability for a broader audience.
• Multi-Column Menus: It supports creating mega-menus, where sub-menus can be displayed in multiple columns for better organization.
• Flyout Menus: In addition to dropdowns, Superfish supports flyout menus, which can be more visually appealing and interactive.
• Animation Effects: Superfish offers various animation effects for menu items, such as fade, slide, and more. These effects can be customized to match the site’s design.
• Delay and Speed Settings: You can configure the delay and speed of the dropdown animations to ensure a smooth user experience.
• Mobile-Friendly Design: It ensures menus work seamlessly across devices, adapting to different screen sizes.
• Accessibility: Offers ARIA (Accessible Rich Internet Applications) support, making the menus more accessible to screen readers and keyboard navigation.

Superfish module is especially useful for sites with complex navigation structures, ensuring that menus remain clear, responsive, and user-friendly. The Superfish module is also favored for its seamless integration with Drupal Views and Block module, allowing flexible menu placement and customization.

Prerequisites: What You Need Before Installing Superfish?

Before installing and configuring the Drupal Superfish module, ensure you meet the following prerequisites:

• Ensure you are using a compatible version of Drupal. Superfish supports Drupal 8 and higher versions.
• Confirm your Drupal core is up to date for security and compatibility reasons.
• Make sure your site’s Menu system is properly configured. Superfish works with Drupal’s core menu features and supports multi-level menus.
• Libraries API Module for managing external libraries if you prefer customized library handling.
• Ensure you have the necessary administrator permissions to install and configure modules on your Drupal site.
• Verify that your theme supports dropdown menus and that it is responsive to allow for Superfish’s mobile-friendly functionality. Some themes may require custom CSS to style the Superfish dropdowns appropriately.
• The Superfish jQuery plugin (included by default in the module). Check that this library is loaded properly if using a custom library setup.
• A standard PHP hosting environment compatible with Drupal (PHP 7.4 or higher for Drupal 9/10).

These prerequisites set the foundation for installing and configuring the Superfish module to create advanced dropdown menus.

How to Install and Configure Drupal Superfish Module?

Before creating the dropdown menus in Drupal using the Superfish module, you need to install and configure the module. Here is the stepwise process to do so:

Step 1: Download and Enable the Superfish Module

Begin by downloading the Superfish module, either manually or through Composer, and enable it in your Drupal site.

• Navigate to the Superfish module page and download the latest version compatible with your Drupal installation.
• Upload the module to the modules/contrib directory on your Drupal site.
• Alternatively, use the Composer command:

composer require drupal/superfish

• Enable the module from Extend > List in the admin panel or via Drush:

drush en superfish -y

At this step, the Superfish module is successfully added to your Drupal setup and activated.

Step 2: Download the Superfish jQuery Plugin

The Superfish module relies on the Superfish jQuery plugin. You need to download and place the plugin files in the correct directory.

• Visit the Superfish plugin page and download the jQuery Superfish plugin.
• Extract the plugin and place its files in your Drupal site under /libraries/superfish/.

This step ensures the required JavaScript library is available for the Superfish module to function.

Step 3: Create a Menu

Set up a menu structure to define the dropdown items.

• Go to Structure > Menus in the admin toolbar.
• Click Add menu to create a new menu, or edit an existing menu.
• Add menu items with sub-items to create the dropdown hierarchy.

With that, we’ve created the menu structure necessary for a dropdown display.

Step 4: Assign a Superfish Block

To display your menu using a Superfish block on the site.

• Go to Structure > Block layout.
• Scroll to the region where you want to place the Superfish menu (e.g., Header).
• Click on the Place block and select the Superfish block corresponding to your menu.
• Configure the block settings as needed, including the title and visibility.

The Superfish block is now placed in the desired region of your site.

Step 5: Configure Superfish Settings

Customize the dropdown menu behavior and appearance using the module’s settings.

• Edit the Superfish block you placed earlier.
• Configure options such as:
  • Animation Effects: Choose effects like fade, slide, or none.
  • Speed: Set the dropdown animation speed (e.g., fast, slow, or a specific duration).
  • Delay: Specify a delay before the dropdown hides (in milliseconds).
  • HoverIntent: Enable to delay menu opening to prevent accidental triggers.
  • Responsive Settings: Enable settings to ensure the menu works well on mobile devices.
• Once configured, save the block settings.

Now the customization is complete, and your menu is now styled and functional.

Step 6: Clear Drupal Cache

Clearing the cache ensures that your changes take effect and any old settings or files are removed.

• Go to Configuration > Performance (/admin/config/development/performance).
• Click Clear all caches via Drush command:

drush cr

With that, we have cleared the cache, ensuring your Superfish dropdown menu settings are applied.

Step 7: Test Your Menu

Verify that the menu is working as expected across different devices and browsers.

• Visit your site and navigate to the menu.
• Hover over the menu items to see if the dropdowns appear as configured.
• Test the animation, delay, and responsive behavior on both desktop and mobile devices.

Here, we have verified that the Superfish dropdown menu works correctly with the configured settings.

By following the above steps, you can successfully install and configure the Drupal Superfish module. Now let’s dive into how to create dropdown menus using the Superfish module in Drupal.

Creating Dropdown Menus Using Drupal Superfish Module

We have seen the process of installing and configuring the Superfish module. Now let’s learn how you can create the dropdown menus:

Step 1: Create or Edit a Menu Structure

Menus in Drupal serve as the foundation for navigation. To implement a dropdown menu, you need a menu with a hierarchical structure (parent and child links).

• Go to Structure > Menus in the Drupal admin toolbar.
• Click Add menu to create a new menu or choose an existing menu to edit.
• Add menu items by clicking on the Add link button. For sub-menus:
  • Assign child items under a parent using the “Parent link” field.
  • Add as many levels of hierarchy as required for dropdown menus.
• Save your changes.

Here we’ve created and modified a menu with a parent-child structure, forming the basis for dropdown functionality.

Step 2: Assign the Menu to a Superfish Block

To display the menu as a Superfish dropdown, you need to assign it to a Superfish block and place it in your site’s layout.

• Navigate to Structure > Block layout.
• Find the region where you want the menu to appear (e.g., Header, Sidebar).
• Click Place block next to the desired region.
• Search for and select the Superfish block associated with your menu.
• Configure the block:
  • Enter a block title or disable it (leave blank if unnecessary).
  • Define visibility settings (e.g., specific pages or user roles).
• Save the block configuration.

The menu is now assigned to a Superfish block and is ready for display in the designated site region.

Step 3: Customize Superfish Settings

Superfish settings determine how your dropdown menu behaves. You can configure animations, delays, accessibility, and more.

• While editing the Superfish block, scroll to the Superfish settings section.
• Adjust the following options as needed:
  • Animation: Select how the dropdown appears (e.g., slide-down, fade).
  • Delay: Set a delay before closing dropdowns.
  • HoverIntent: Enable hover-based opening for smoother interactions.
  • Mobile Menu: Enable touch-friendly settings for responsive design.
  • Keyboard Accessibility: Allow users to navigate menus with keyboards.
• Test different settings to achieve the desired behavior.
• Save the block configuration.

Here we’ve configured the Superfish block settings to control the dropdown menu’s behavior and ensure accessibility.

Step 4: Add Superfish jQuery and CSS in Theme

Ensure the theme loads the necessary Superfish jQuery and CSS files for that add the following lines to your theme’s .info file:

scripts[] = libraries/superfish/jquery.superfish.js
stylesheets[all][] = libraries/superfish/css/superfish.css

Once done, clear the Drupal cache to apply the changes.

Step 5: Test the Dropdown Menu

Testing ensures that the dropdown menu works as expected across various devices and browsers.

• Visit the frontend of your site to view the menu in action.
• Hover over parent menu items to confirm that submenus appear as dropdowns.
• Test the menu on mobile devices to verify touch functionality.
• Use keyboard navigation to ensure accessibility.

This step will make sure that your dropdown menu is functional and provides a user-friendly navigation experience across all platforms.

By following the above steps, you’ll create a functional and customizable dropdown menu using the Drupal Superfish module. If you are looking to create an extensively customized website with simplified navigation, get in touch with our Drupal development company.

Styling Superfish Dropdown Menus with CSS

Styling Superfish dropdown menus with CSS allows you to customize their appearance to match your website’s design and branding. Here’s a step-by-step guide:

Step 1: Understand the Superfish CSS Classes

Superfish uses predefined CSS classes for its menu items and behaviors. Common classes include:

• .sf-menu: The main class applied to the Superfish menu.
• .sf-menu > li: Top-level menu items.
• .sf-menu li ul: Submenu containers.
• .sf-menu li:hover: Hover states for menu items.

Use various chrome extensions (e.g., Inspect Element) to explore the structure and identify classes.

Step 2: Customize Top-Level Menu Items

Modify the appearance of the top-level menu items:

.sf-menu > li {
  list-style: none;
  display: inline-block;
  margin: 0 10px;
}
.sf-menu > li > a {
  text-decoration: none;
  padding: 10px 20px;
  color: #fff;
  background-color: #0073e6;
  transition: background-color 0.3s ease;
}
.sf-menu > li > a:hover {
  background-color: #005bb5;
}

This adds spacing, hover effects, and styles for top-level links.

Step 3: Style the Dropdown Menu

Target submenus to adjust their appearance:

.sf-menu li ul {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
}
.sf-menu li ul li {
  margin: 5px 0;
}
.sf-menu li ul li a {
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
}
.sf-menu li ul li a:hover {
  background-color: #eaeaea;
  color: #000;
}

Submenus now have a distinct background, spacing, and hover effects.

Step 4: Add Animations

For smoother dropdown transitions you can add the following code:

.sf-menu li ul {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}
.sf-menu li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Submenus will appear with a smooth fade-in and slide-down effect.

Step 5: Add Icons or Arrows

You can enhance the visual appeal of your Superfish menu by adding icons or arrows to indicate dropdowns. Here is the example CSS code:

.sf-menu li > a:after {
    content: '\2193'; /* Unicode for a down arrow */
    margin-left: 5px;
}

Arrows will appear next to menu items that have a dropdown, helping users to identify those items more clearly.

Step 6: Responsive Styling for Mobile Devices

Ensure that the Superfish menus look good on mobile by adding responsive breakpoints. You may want to switch from a horizontal to a vertical menu.

/* Stack the menu items vertically on small screens */
@media (max-width: 768px) {
    .sf-menu {
        display: block;
    }
    .sf-menu li {
        display: block;
    }
    .sf-menu li ul {
        position: static; /* Make the dropdowns appear below the parent items */
    }
}

On smaller screens, the horizontal layout switches to a vertical layout, making the menu easier to navigate on touch devices.

Step 7: Test and Refine

After applying the CSS, ensure you test the Superfish menus across different browsers and devices. Tweak colors, padding, spacing, and other visual aspects based on your site’s overall design.

With that, we have created a fully customized and visually appealing dropdown menu with Superfish on Drupal. You can make changes to the CSS code as per your requirements to achieve the customization you need.

Best Practices for Creating Superfish Dropdown Menus

Here are some best practices for creating Superfish functional and well-integrated dropdown menus in Drupal:

• Organize Items Hierarchically: Superfish menus work best with a clear, well-organized structure. Ensure that the menus and submenus are logically nested, as this will allow for easy navigation.
• Use Clear Labeling: Each menu item should have a descriptive label that helps users understand the content or section they are accessing.
• Mobile-Friendly Menus: Make sure your Superfish menus are responsive and adapt to different screen sizes. Use CSS media queries to convert horizontal menus into vertical ones or display them as a hamburger menu on smaller screens.
• Touch-Screen Considerations: Ensure the dropdown menus work well on touch devices. Menus should be easy to navigate by touch without requiring precise hovering.
• Keep It Simple: Opt for smooth hover and transition effects to enhance the user experience without overwhelming visitors. Use opacity, transform, and transition properties for subtle effects.
• Aria-Attributes: Make use of ARIA (Accessible Rich Internet Applications) attributes to help assistive technologies understand the structure of your menus. For example, use aria-expanded to indicate the state of dropdowns.

By following these best practices you can ensure that dropdown menus are well-structured, responsive, and visually appealing.

FAQs About Creating Dropdown Menus in Drupal

Wrapping Up

Creating smooth and responsive dropdown menus on your Drupal site can enhance the user experience, making navigation simple and efficient. By using the Superfish module, it’s easy to build customised and animated menus without needing complex coding knowledge.

With just a few simple configuration steps, you can add multi-level menus and even customize their look with CSS. Additionally, with styling options, you can align the dropdowns with your site’s design while maintaining optimal performance.

If you are looking to build a robust website that is easy to navigate, hire our Drupal developers.