Skip to main content
Home
LostCarPark

Main navigation

  • Advent Calendar
  • Home
User account menu
  • Log in

Breadcrumb

  1. Home
  2. Drupal
  3. Advent Calendar

Drupal Advent Calendar Door 17: Superfish

By lostcarpark_admin, 17 December, 2022
Advent Calendar door 17 containing Superfish icon

Welcome back to day 17 of the Drupal Advent Calendar, and today we have a module that I have used a lot and always find really helps make sites more usable and user friendly.

Drupal has a really impressive menu system, with a lot of power to create hierarchical menus.

Unfortunately, when it comes to displaying menus, it sometimes feels like it’s stuck in the 1990s.

However, I feel that one of the reasons Drupal hasn’t gone to as much effort as you might expect to improve menu display is because there are some fantastic modules that take care of this, and my personal favourite is the Superfish module.

Superfish is all about presenting beautiful menus. It uses Javascript to handle the display of menus, and it can provide drop-down or pop-up submenus, and lots of different ways of formatting them.

The default Drupal menu displays a top level menu. You can add additional menu blocks to show the second or additional level menus, but they can be a bit clunky, and don’t get shown until the child page loads.

Superfish replaces them with an enhanced menu block that gives you a lot of control over how child menus are shown, but in general they appear when hovering over the parent menu (or tapping on it on mobile devices). It handles all the difficult stuff around detecting the device type and making the menu work on all devices.

To use it, you use the Structure→Blocks administration, then disable the regular menu block, and enable the Superfish menu.

Enabling the Superfish menu block and disabling the normal one

You can configure the Superfish settings, giving you many options to control how your menus display. There are plenty of options, including ones to allow you to display multiple levels of menu in a single drop-down.

Configuring block options for the Superfish menu

Once this has been configured, the Superfish menu takes over from the regular Drupal one, and it’s easy to forget it’s there at all.

The Superfish menu with a drop-down open.

You can, of course, apply advanced styling to it, but that’s down to your site theming, and out of the box it looks pretty good.

And that’s another Advent Calendar door opened. I hope you’ll join me for another module tomorrow, as we enter the final week.

Advent Calendar with door 17 open revealing a fish in a superhero costume

 

Topic
Advent Calendar

Tags

  • modules
  • menus
  • Superfish

Recent content

  • Drupal Advent Calendar Door 24: DrupalCon
    1 month ago
  • Drupal Advent Calendar Door 23: StarterKit Themes
    1 month ago
  • Drupal Advent Calendar Door 22: Project Browser
    1 month ago
  • Drupal Advent Calendar Door 21: DrupalPod
    1 month ago
  • Drupal Advent Calendar Door 20: Baubles
    1 month ago
  • Drupal Icon Bauble
    1 month ago
  • Drupal Advent Calendar Door 19: Antibot
    1 month ago
  • Drupal Advent Calendar Door 18: Simplenews
    1 month ago
  • Drupal Advent Calendar Door 17: Superfish
    1 month ago
  • Drupal Advent Calendar Door 16: Moderation Note
    1 month 1 week ago
LostCarPark

Footer

  • Contact
Powered by Drupal