Module Monday: Sprite Graphic Menu

Using Images as Menu Items in Drupal

The ability to have images as menu items sounds like a common and straight forward task. Surprisingly, Drupal never has had this ability built into core, but there are a few modules that will help us accomplish our goal. Sprite Graphic Menu is probably the easiest one to use and the one that will be covered in this article.

It is possible to write some custom code using regex in your template.php which could parse the title field of a menu item to look for image filename extensions and then alter the menu output to print that menu item as an image. But wouldn't it be nice if a module could extend the current menu system and provide an image upload field. Even better, how about some CSS options to provide our own sprite background positioning. This is exactly what Sprite Graphic Menu does for us.

The current process is a bit janky and will hopefully be improved. Example: You will not see the image upload field when first creating a menu item. You must create the menu item and then edit it, then the image upload and configuration options will be displayed on the form.

No need to update your custom CSS files, these inline settings can all be set for visited, hover, and active states. So a single image that displays all states of the menu item should be uploaded, this is known as an image sprite and will improve page load times by reducing the number of requests made to the server. If you are not familiar with image sprites here's a great article from A List Apart that will give you some background.

Here's an example of Grammy.org, one of the sites we built which uses this module.

Once you and/or your client are familiar with the process of creating these image menu items, it becomes simple to update or add other images to your menus. This module empowers site builders and owners to make changes via Drupal administration pages without needing to mess with CSS files directly on the server. I hope to see more development made with this module until we get this functionality built into future versions of Drupal core.

Other modules that were looked at prior to deciding on Sprite Graphic Menu include Menu Minipanels, Megamenu, and Giga Menu. However, the main goal of those modules was more robust by adding columns and content into the menu instead of simply adding an image as a menu item. Sprite Graphic Menu does not yet have a Drupal 7 branch and there are a handful of issues that are already patched and awaiting to be committed, like this one done by justafish that resolves a number of outstanding issues.

Get in touch with us

Tell us about your project or drop us a line. We'd love to hear from you!