Demo
Check out the menu on the left of this page to see a live demo of the Accordion menu.
Creating an Accordion Menu
Tip: If you are trying to add an accordion menu to a sidebar or page content, you can use the Block, Shortcode, Widget or PHP method to add a new menu to your site.
Accordion menus are built in exactly the same way as a standard WordPress menu.
To switch your menu from a horizontal (default) to a vertical accordion menu, go to Mega Menu > Menu Locations, open the settings for your menu location and select “Accordion” from the Orientation dropdown on the Desktop tab:
The accordion menu will respect the ordering and hierarchy of the menu.
Just like any other menu created with Max Mega Menu, you have full control over the styling of the menu using the Theme Editor.
You can create as many accordion menus as you need, outputting each one using either a block, shortcode, widget or PHP code.
Accordion Behaviour
A new option – Accordion Behaviour – will appear when the orientation is set to ‘Accordion’. There are three options:
- Expand active sub menus – this will automatically open sub menus when you are on a sub page. This is the setting we’re using for the demo on the left (note how the “Pro Features” sub menu is automatically expanded because we’re on a sub page).
- Expand all sub menus – all sub menus will be expanded on page load.
- Always collapse submenus – all sub menus will be closed on page load. Users must click or hover over a heading to reveal a sub menu.
Recommended Settings
To avoid terrible menu design, the Event should be set to ‘Click‘ for accordion menus.
Accordion Menus respect the ‘Click Event Behaviour‘ setting, found on the Advanced tab of the menu location settings. You can choose from ‘First click will open the sub menu, second click will close the sub menu’, ‘First click will open the sub menu, second click will follow the link’ or ‘First click will follow the link (the arrow must be used to toggle sub menu visibility)’. Regardless of the option chosen, the Arrow indicator will always toggle the sub menu.
Accordion Menus also respect the ‘Accordion Behaviour‘ setting on the Mobile tab of the menu location settings. On the documentation menu to the left, we have it set to “Standard – Open sub menus will remain open until closed by the user”. It is also possible to set it to “Accordion – Open sub menus will automatically close when another one is opened”.