YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Setup the Menus

This tutorial explains how you define a menu module as dropdown or accordion menu using the Menu Class Suffix in a template based on the Warp framework.

Define a menu module as a dropdown menu

Define Menu Module as Dropdown

To create a menu module with dropdown functionality for your Main Menu go to Extensions -> Module Manager and create a new module. Choose Menu. Select the position menu.

Define Menu Module as Dropdown

To the right you find the parameter Menu Name; choose mainmenu. Set the End Level to 3 to show three levels (1, 2 and 3) and Always show sub-menu Items to Yes. Now click on Advanced Parameters.

Define Menu Module as Dropdown

As the Menu Class Suffix, you need to type in menu-dropdown. As the Module Class Suffix, type in style-menu. That's it!

Define a menu module as an accordion menu

Define Menu Module as Accordion

The first level items of the menu you want to display (on whose click you want to display their sub items with an accordion effect; in the example Accordion A and Accordion B) must be separators to achieve the accordion effect.

Define Menu Module as Accordion

To create a menu module with accordion functionality go to Extensions -> Module Manager and create a new module. Choose Menu. Select a position where a vertical menu fits, preferably a column, like the left position.

Define Menu Module as Accordion

To the right, you find the parameter Menu Name; choose the menu you want to display. Set the End Level according to how many levels you want to display. Now click on Advanced Parameters.

Define Menu Module as Accordion

As the Menu Class Suffix you need to type in menu-accordion. As the Module Class Suffix type in style-menu. Done!

Default menu styling: If you leave the field for the Menu Class Suffix blank, the menu will appear with the the template's default styling for menus without the accordion effect.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!