In Joomla 3.0 you can add images to your menus.  I will show you how to add images to your Menu items in the Menu Manager.  I will create a new menu listing called ‘Fruit Top’ and under that menu I will create child menu items – Apples and Pears.  One menu item I will create just as an image and the other will have the image and the title of the menu.  You can see what I mean in the screenshot below:

Overview of Adding Images to Menu

1. Edit your Menu Item in Menu Manager 
2. Select Image ‘Advanced Options’ in Menu Manager
3. Insert Image with Title – See Example – Apples
4. Insert Image without Title – See Example – Pears

Steps:

1.  Edit your Menu Item in Menu Manager 

You can add an image to any Joomla 3.0 menu item whether it be the parent or child menu item.  In this example I will be creating the ‘Apples’ child menu item under the ‘Fruit Top’ Parent menu item.  Please create a menu item with your own information.

• Login to your Joomla 3.0 Administrator Panel
• Click on ‘Menus’, ‘Top’, ‘Add New Menu Item‘
• Enter in the following under the ‘Details’:
  • Status = Published
  • Menu Title = Apples
  • Menu Location = Top
  • Parent Item = – Fruits Top
• Click on ‘Advanced Options’

2.  Select Image ‘Advanced Options’ in Menu Manager

Here you can upload an image or select an existing image from your Media Manager.  This is linked directly to your Media Manager.  You can easily upload an image using the ‘Choose file’ & ‘Start Upload’ button.  I’ve already uploaded my ‘Apple’ picture so I don’t need to upload it again.

• Click on the image you want as your Menu Image
• Click on ‘Insert‘

3.  Insert Image with Title – See Example – Apples

From the example you will see the word ‘Apples’ beside the image.  If this is what you want then set

• Add Menu Title = Yes
• Click on ‘Save & Close’

4.  Insert Image without Title – See Example – Pears

If you want to show the menu item without the menu title like the Pear Menu item.  See the example at the very top, where you just see the image of the Pear and not the Menu title:

• In the ‘Advanced Options’ in the Menu Manager : Edit Menu Item
• Set the following value:
  • Add Menu Title = No
• Click on ‘Save & Close’

Now you can refresh your Joomla 3.0 frontend and see our menus with images.  You can even try to set the parent menu item with an image as well.

Hope that helps you,

Elaine