Mega Menu

Mega Menu

A mega menu is a navigation feature that provides users with a comprehensive overview of your website's menu items arranged in rows and columns. A well-designed mega menu can improve website usability, enhance navigation, and deliver a superior user experience. This can lead to increased engagement and higher conversion rates.

Benefits of a mega menu

  1. Boosts visitor experience through enhanced site navigation

  2. Organizes content using layout, typography, and imagery

  3. Increases user-friendliness by forming logical groups and categories

  4. Eliminates the need for scrolling by displaying all menu options at once

To add a mega menu

  1. Go to Configuration -> Menus.

  1. Click Add Menu.

  1. Provide a menu name and select the mega menu checkbox, then click Save.

Rows

By default, the mega menu has one row. The default row will have four columns.

 

 

 

To add a new row

  1. Click Add Row at the bottom.

  1. Select the layout and click OK.

To change the row layout

  1. Click the layout icon above the row name.

  1. Select the layout design. The row will automatically switch to the desired layout.

 
Selecting a layout with fewer columns than the current number will push the menu items (from the removed columns) to the end of the column that remains after this transition

To rearrange the row order

  1. Use the arrows beside the layout icon to move rows up and down to rearrange as you wish.

  

To delete a row

  1. Click the Delete icon.

  2. Confirm by clicking Delete once more.

  

Columns

To add new menu items

  1. Hover over the column and click Add Menu Item.



You can add pages, external links, files, blog categories, and text as menu items.

To add a Page as a menu item

  1. Hover over any box and click Add Menu Item.

  1. Select Page from the left panel.

  1. Choose a page from the drop-down.

  1. Provide the Menu item name.

  1. Choose to show as Text, Heading, or Image.

  1. Add a relevant icon if required.

  1. Enable the Highlight option to show the menu item in a different style. This is beneficial in case you wish to promote important links.

  1. Choose your Highlight style, then click Save.

    

  1. Hover over any box and click Add Menu Item.

  1. Select External Link from the left panel.

  1. Provide the External link URL.

  1. Enable the Open in new tab toggle if you wish to open the page in a new tab.

  1. Provide the Menu item name.

  1. Choose to show as Text, Heading, or Image.

  1. Add a relevant icon if required.

  1. Enable the Highlight option to show the menu item in a different style. This is beneficial in case you wish to promote important links.

  1. Choose your Highlight style, then click Save.

 

It is a good practice to open the link in a new tab so that customers aren't redirected from your website. 


To add a File as a menu item

  1. Hover over any box and click Add Menu Item.

  1. Select File from the left panel.

  1. Click Add File. You can add images, text, and PDFs as files. You can also add files from the image library via Google or Pixabay using the built-in search function.

  1. Provide the Menu item name.

  1. Add a relevant icon if required.

  1. Enable the Highlight option to show the menu item in a different style. This is beneficial in case you wish to promote important links.

  1. Choose your Highlight style, then click Save.

      

To add a Blog Category as a menu item

  1. Hover over any box and click Add Menu Item.

  1. Click Blog Category from the left panel.

  1. Choose a category from the Select category drop-down.

  1. Provide the Menu item name.

  1. Choose to show as Text, Heading, or Image.

  1. Add a relevant icon if required.

  1. Enable the Highlight option to show the menu item in a different style. This is beneficial in case you wish to promote important links.

  1. Choose your Highlight style, then click Save.

To add Text as a menu item

  1. Hover over any box and click Add Menu Item.

  1. Click Text from the left panel.

  1. Provide the Menu item name.

  1. Add a relevant icon if required.

  1. Enable the Highlight option to show the menu item in a different style. This is beneficial in case you wish to promote important links.

  1. Choose your Highlight style, then click Save.

Adding an icon can enhance the visual appeal of a mega menu, making it more attractive and easier to navigate. Using icons in a mega menu can also improve a website's usability and overall user experience, making it easier for visitors to find what they are looking for and navigate the site efficiently.

To rearrange menu items between columns

Drag and drop existing menu items to a different column to move them around within different columns.
Columns cannot be rearranged as a whole.

To rename or delete a mega menu item

  1. Click the More Options icon [] beside the menu item.
  2. Click Rename to change the name of the menu item.
  3. Click Delete to delete the menu item itself.
  4. Click Save.