Creating Multi Column Dropdown Menus

This tutorial applies to the following templates:

  • Colette
  • Maya
  • Grace
  • Magnolia
  • Harmony
  • Verona
  • Kodaline
  • London
  • Hannah
  • Elvira
  • Valencia
  • Serenity
  • Chelsea
  • Ashley
  • Nadia

In recent template releases we have added the option to split the main menu dropdown in to multiple columns. This is particulary usefull if you have a large number sub menu items in your navigation which can cause the dropdown to extend outside of the browser window.

This feature allows you to add up to 4 columns in your dropdown and is simple as adding a class name to the 'Link CSS Style' field of dropdowns parent menu item. In the following example we are going to split our dropdown in to 3 columns.

  1. Navigate to your main navigation menu (Menus -> [MainMenu]

  2. Click in to the parent menu item whos sub menu items you organise in to columns.


  3. Select the 'Link Type' tab. And add columns-3 to the Link CSS Style field. If you already have a class name in this field simply add the columns-3 after it separated by a space. You can also use columns-2 or columns-4 depending on how many columns you wish to implement.


  4. Hit Save & Close


  • Friday, 02 September 2016

Who's Online

We have 215 guests and 4 members online

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.