top of page
Mega Menu

Mega Menu

Pack your entire website's navigation into a single multi-level dropdown menu.





March 17, 2020

Girl Enjoying her Drink


Anchor 1
Hire a Developer

Example Description

In this example, we create a dropdown menu that allows your site's visitors to easily navigate through the different categories of your site. For example, under the MEN category, there is a subcategory, SHOES. In that subcategory visitors can filter by Product, Range and New.

Example Code

Tab 1


Tab 2


Tab 3


This code solution can be complicated.

How We Built It


For this example, we created following collections:

  1. mainMenu - Contains the names that show on each main menu button label.

  2. subMenu - Contains the names that show on each submenu button label. Each submenu item references which main menu item it belongs under.

  3. productMenu - Contains information about products. Each item references the submenu item it belongs under.

  4. newMenu - Same as the Product collection, but for new products.

  5. rangeMenu - Same as the Product collection, but for product ranges.

Page Elements

In our site we added the following repeaters that make up the menu:

  • mainMenuRepeater - for the main menu buttons.

  • subMenuRepeater - for the submenu buttons.

  • productRepeater - for displaying the products that belong to a submenu item.

  • rangeRepeater - for displaying the product ranges that belong to a submenu item.

  • newRepeater - for displaying the new products that belong to a submenu item.


Backend Code

In data.jsw we are doing 2 things:

  1. Define the menu names - we are doing the actual definition in this single place, and later using the data in a generic way across the rest of the site’s code.

  2. Fetching the data for the menus from  stored the collections, and returning this data to the client side.

Page Code

We added the following page code to create the mega menu:

  1. iniPage - Call the backend function to query all the menus data.

  2. connectDataToRepeatersItems: Loop over all the repeaters and implement the functionality of each one, such as populating images and setting the button’s link.

  3. The selectMenu function:

  • Defines the different states of the buttons and the data of the repeaters depending on what menu item was clicked.

  • Returns data that is filtered to only include information that relates to the current selection.

APIs We Used

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?




Thanks for your feedback!

Change Site Content

Change Site Content

Change site content in response to a user interaction.



Mega Search

Mega Search

Filter a repeater using multiple input components.



Checkbox Dropdown

Checkbox Dropdown

Search a site using multiple filters.



Anchor 2
bottom of page