Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Superfish integrates jQuery Superfish plugin with your Drupal menus.
Overview:
- Unobtrusive JavaScript.
- Multi-column sub-menus. (Megamenus)
- Easing effects with the jQuery Easing plug-in.
- Automatic sub-menu width calculation. (Supersubs plugin)
- Automatic sub-menu position calculation, so they never appear off-screen, (Supposition plugin)
- Keyboard-accessible.
- Screen Reader compatible.
- Touch-screen compatible.
- Small-screen compatible. (
<select>
and vertical accordions) - Device determination for touch and small-screen plugins using window width and UA string (client-side and server-side), plus Modernizr support.
- RTL (Right-to-left) support.
- And a whole lot more...
Requirements:
- Drupal 8 & 9
- Drupal 7
- Superfish library 1.x (Sample CSS & SCSS)
- JQuery 1.6.1 or higher, if you are going to use the jQuery Easing plugin.
- Behavior Weights
Recommended additions:
- Libraries module
- jQuery Easing plugin (note that the file has to be renamed to
jquery.easing.js
before being uploaded tosites/all/libraries/easing
)
Installation:
-
Drupal 8 & 9
Through Composer:
composer require drupal/superfish
More information.
Through your Web browser:
- Download the Superfish library and extract it somewhere like /libraries/superfish (so that the superfish.js will be located at http://example.com/libraries/superfish/superfish.js)
- Download and extract the Superfish module in /modules.
- Go to the Extend section of your Drupal administration back-end and enable "Superfish".
- Go to the "Block layout" page (under Structure) and use any of the "Place block" buttons to create a Superfish block. Use the "Configure" link of the block to configure it accordingly to your needs.
- Drupal 7
- Download the Superfish library and extract it somewhere like sites/all/libraries/superfish (so that the superfish.js will be located at http://example.com/sites/all/libraries/superfish/superfish.js)
- Download and extract the Superfish module in /sites/all/modules.
- Go to the Modules section of your Drupal administration back-end and enable "Superfish".
- Go to your blocks administration page; You will see several blocks called Superfish", move any of them to a region, use the "Configure" link of the block to configure it accordingly to your needs, and save.
Update
For update instructions please refer to the module documentation.
Pledge
#D8AX - I pledge to make this module as accessible as it can be. If you find any flaws, please submit an issue. Help me fix them if you can.
Project information
- Module categories: Developer Tools, Multilingual, Site Structure
- 82,525 sites report using this module
- Created by mehrpadin on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
8.x-1.7
released 9 October 2023
Works with Drupal: ^8 || ^9 || ^10
✓ Recommended by the project’s maintainer.
Install:
Development version: 8.x-1.x-dev updated 17 Mar 2024 at 11:27 UTC