This article is also available in:
On this page

A. Enable Mega Menu
B. Mega Menu Settings
C. Mobile Layout
D. Examples

A. Enable Mega Menu

In short, Mega menus, or Megamenus, are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-level.

Roller comes with the ability to create up to five advanced mega menu layouts.

Before you start

The Mega Menu is primarily configured in the Theme Editor. However, to get started, you'll need to create a menu (or menus) in the Navigation area of your storefront from your ShopBase Admin.

Please check out our guide to setup menu items in Navigation.

Create Mega Menu

In your Theme Editor you can then enable the mega menu/menus by going into Customize > Theme Settings > Mega Menus. Here you can enable 1 to 5 mega menus.
Once you have enabled at least 1 mega menus, you will then have access to the Mega Menu tab under Sections:

For each mega menu you've enabled, enter a Link title that matches the link in the main menu that you want the mega menu to appear under.

For example, if you want your mega menu to appear under the Our Shop menu item, the 'Link title' will need to be named Our Shop as well! You can then add columns to your mega menu by clicking the Add column button.

Important: the Link title must match the wording of the main menu link exactly. Link titles are not capital-sensitive.

B. Mega Menu Settings

The content settings in are for configuring each column in the Mega Menu. In each column, you can configure Top Content, Navigation, and Bottom Content. All of these are optional!

Top Content
The Top Content area includes a 'text area,' 'image,' 'image caption,' and 'image link':

The Navigation area includes the option to add up to four menus! For each menu, you can add a link to the title of the menu as well:

Bottom Content
The Bottom Content area is similar to the Top Content except that it will appear at the bottom of the column. It includes 'image,' 'image caption,' 'image link,' and 'text area' options:

C. Mobile Layout
When viewed on a mobile device, the columns in the Mega menu will stack vertically. All of the menus added to the Mega menu will display as drop-down menus:

D. Examples

Was this article helpful?
Thank you!