Superfish integrates jQuery Superfish plugin with your Drupal menus.
- Keyboard-accessible, screen reader friendly.
- Multi-column sub-menus. (Megamenus)
- Easing effects with the jQuery Easing plug-in.
- Automatic width calculation (sfAutomaticWidth plugin) (Use the development release)
- Automatic sub-menu width calculation (Supersubs plugin), automatic sub-menu placement (Supposition plugin; prevents sub-menus from appearing off-screen.)
- Touch-screen compatible. (almost)
- Small-screen compatible. (
<select>and vertical accordions)
- Window width (client-side) and UA string (client-side and server-side) detection for touch and small screen plugins (no CSS3 media-queries)
- RTL (Right-to-left) language support.
- Plenty of built-in options for designers.
- And a whole lot more...
- Superfish library
- jQuery Update
- Drupal 6 users: jQuery 1.3.x or higher.
(sfTouchscreen in the Master branch of the Superfish library requires at least jQuery 1.4.)
- Drupal 7 users: jQuery 1.6.1 or higher, only if you want to use the jQuery Easing plugin animation effects.
- For jQuery 1.9 and above you should either manually include the jQuery $.Browser plugin, via your theme .info file for example, or use the latest development release with the master branch of the Superfish library, which checks
$.browserbefore using it. (Note the
superfish.jsfor Drupal 8 won't include the IE6\7 hack hence no $.browser trouble!)
- Drupal 6 users: jQuery 1.3.x or higher.
- Libraries module
- jQuery Easing plugin (note that the file has to be renamed to
jquery.easing.jsbefore being uploaded to
- Download the Superfish library and extract it to 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 to /sites/all/modules.
- Enable a Superfish block in the Blocks administration page.
- If the menu doesn't look good, your theme may not have a built-in style for the menu. Go back to the Blocks administration page, click 'configure' on enabled Superfish block, and choose a style from the Style list. Alternatively, you can also read the documentation to learn how to add built-in styles to your theme.
- Please note, the development release is pretty stable (which requires the master branch of the Superfish library) and can (or even should!) be used on production sites.
Upgrade to v1.9
There are few things you need to do before and after upgrading:
- Before uploading the new files, please create a back up of the module (usually sites/all/modules/superfish) and Superfish library (usually sites/all/libraries/superfish) if you have made any changes to them (please note that you're not supposed to change any of those files, the only accepted change is addition of CSS files to the /style directory of the Superfish library). Use a visual comparison software (such as WinMerge or Kompare) in order to compare your current copy with its original one, find out what was changed and do the same to the version you are upgrading to.
- After uploading the new files:
- Go to Superfish module configuration page (D6: admin/settings/superfish & D7: admin/config/user-interface/superfish) and add the path to sfsmallscreen.js plugin (which should be sites/all/libraries/superfish/sfsmallscreen.js).
- Clear the Drupal cache once.
- Go to the Permissions administration page and check the Administer Superfish for the administrator role or any other role you want.
- If are using the Plugin Manager to upgrade you will need to upgrade the Superfish library, manually because the Plugin Manager only upgrades the module.
Development release & the master branch of the SF library
- The development release contains the most features and the least bugs. Please use it as it helps me learn of potential bugs and issues in order to release a stable version, faster, thank you in advance.
- The master branch of the Superfish library is the recommended library for the development releases. Important: Do not use Drush (or Drush Make) for a development release, upload the library (the master branch) manually instead.
- If you are upgrading to the development release you may need to add the path to the sfAutomaticWidth plugin manually, in the same way as explained above for the sfSmallscreen plugin.
- Jan 2015: Happy new year! I've been terribly busy past few months, will be back to SF and all as soon as possible, development release and the SF library master branch are stable enough for production use. Email me for urgent support requests.
- Apr 2014: New stable release coming soon, D8 version will be available as a stable release once D8 RC1 released.
- Jun: Superfish is now even more responsive! with an all new accordion menu type added to the sfSmallscreen plugin; in addition, a fantastic new plugin added to the Superfish library (sfAutomaticWidth) which automatically adjusts the menu width to maximum possible, making styling quite a lot easier, especially for menus with varying parent items (such as if using i18n module), but that's not all, major performance improvements were made to everything, as a result Superfish is quite a lot faster and consumes a lot less memory. Development release is now highly recommended!
- Mar: The jQuery Superfish plugin was not receiving any updates for about three years, the developer reappeared recently! and is doing an extensive & remarkable overhaul to the plugin, once he's done I'll start merging the changes that benefit the users of this Drupal module into the Superfish-for-Drupal Library.
#D7AX - 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.
#D8CX: I pledge that Superfish will have a full Drupal 8 release on the day that Drupal 8 is released.
Eat one less hamburger & give a donation to cancer research, thank you!
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 134,943 sites currently report using this module. View usage statistics.
- Downloads: 593,129
- Last modified: January 3, 2015