Joomla mod_mainmenu: Add separator images between menu items

I see a lot of forum posts complaining about Joomla's built in menu module not being able to support adding images for your separator menu items. The root cause of this is that the menu module uses a span to output your menu separator. This is not a terrible implementation, and works quite well if for a text based menu with hyphen or pipe separator text. However, if you simply want a separator image, with no text, a span is frustrating because it has no width (and hence, does not display any background image...).

Some options:

1. Use the extended menu module - this module is not designed for ease of use, as the developers detail. It does give you a lot of nice options to enhance or customize your menu module though, and if you have a reasonable command of html, this could be a good solution.

2. Customize the mod_mainmenu code to output a div instead of a span, and then configure your css appropriately. I am not going to detail this, because it seems to me that options 1 or 3 are always better, easier, and quicker alternatives.

3. Insert standard Joomla menu items of type separator. For the title insert a non-breaking space (thus providing your span with its much-needed width). Add your background image in css, and voila!

For most menus, where a simple vertical line or separator image is all that is needed to help distinguish menu items and your navigation bar, option 3 is a pretty simple solution. If you feel like you want a lot more control over your menu, it's functionality, and it's styling - check out the extended menu module.

I hope this saves you some headaches and time spent searching the web for "setting span width" and "setting empty span background image".

Comments are closed.