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:

Recommended additions:

Installation:

  • Drupal 8 & 9

    Through Composer:

    composer require drupal/superfish
    More information.


    Through your Web browser:

    1. 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)
    2. Download and extract the Superfish module in /modules.
    3. Go to the Extend section of your Drupal administration back-end and enable "Superfish".
    4. 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
    1. 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)
    2. Download and extract the Superfish module in /sites/all/modules.
    3. Go to the Modules section of your Drupal administration back-end and enable "Superfish".
    4. 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

Releases