Example Menu: Featured Images

The most common use of a mega menu is to have one or more lists of navigation links on the left-hand side and then promoted featured content on the right-hand side using images. This is a great way of creating more engaging site navigation. You can see an example of this on our demo site underneath the "Outdoor" menu item.

How to

Here's a breakdown of how this kind of menu design can be achieved.

We recommend three levels of menu items for most menus. Here the top-level menu items are "Outdoor", "Kitchen", "Flooring & Tiling" etc. On the second level, we have "Outdoor Furniture", "Outdoor Lighting", "Outdoor Accessories", etc. Finally, at the third level, we have "Benches & Chairs", "Dining Tables & Chairs", etc.

List of links

The list of links is the default way that menu items will be shown.

View All link

It's common to want the final link in a list of links to be styled differently, e.g. to advertise a "View all" or "Shop all". In our example, we've simply made it bold. This has been achieved by adding "bold" to the custom class list. We have a selection of built-in classes that can be added to a menu item to tweak the design.

Featured Images

To achieve the featured image on "Outdoor Accessories", we have simply added an image to the second-level menu item.

If you wanted the "Outdoor Accessories" heading to be before the image, you could customize with the CSS class "title-first" on the menu item. Another way of achieving this would be to create a third level menu item beneath "Outdoor Accessories" and add the image to this item instead. Both menu items would link to the same place. To hide the menu item name on the third-level menu item you could customize with the CSS class "hide-title".

The final image promoting the sale is achieved using this approach. It is a second -evel menu item with a custom class of "hide-title" added to it.

Images on second-level menu items

The "Kitchen" top-level menu item uses images in a similar way. The main difference is that they are added to the second-level menu item while also having a list of links beneath each of them. This creates a nice effect where the three lists of categories have an over-arching image that helps to capture the essence of the category and therefore gives direction to the customer without having to read the link.