All Collections
Onepage essentials
Сreating a Mega Menu in Onepage
Сreating a Mega Menu in Onepage
Nik Makukhin avatar
Written by Nik Makukhin
Updated over a week ago

What is a Mega Menu

Mega Menu is a handy feature that enhances your Header element, allowing menu items to expand with additional content.

If you want to create a structure like this in your menu, then the Mega Menu feature is the way to go:

Services -> Service 1, Service 2, Service 3

How to find Mega Menu

That's a straightforward process. First, you need to find the Header section in the section categories. Here they are :

(please note that you might see different header elements as we frequently update our sections, just continue following the steps):

Now, add this section to your page and click on the "Menu" element to see the tooltip. You can assign Mega Menu to a menu item, so select the item you want to expand.

If you want to create a new menu item, then you can select a Mega Menu as an action right while creating it, just like this :

Now, that we're clear with how to add Mega Menu, let's focus on some of the most important features that are in there :

Adjusting your Mega Menu

Create a single-column or multi-column mega menu

Just choose the right Blueprint or Template that suits the amount of content you need. If you made a mistake, don't worry, you can always expand the number of columns by clicking on the "+" element in the divider.

Edit your Mega Menu

In Onepage, you edit the Mega Menu just like you would with regular sections.

- You can add almost any Onepage element into the dropdown.

- The editing controls are the same as what you're already used to.

- You can use the same shortcuts as if you were editing a regular section.

Let's go through some basics. In the top-right corner, you'll find an element to control your dropdown layout and settings.

To control the mobile layout, you use the Header settings, which are usually located slightly above the dropdown in the top-right corner.

And finally, you can rearrange and adjust the dropdown columns by dragging the divider element, which appears between two columns, like this:

Reusing your Mega Menu

Once you've created a bunch of examples that you like, there are two ways to simplify your further workflow:

— Make your menu section a global section. This way, it will appear the same on all pages you decide to add it to, so you don't have to recreate your mega menu again and again.

— If you don't want your menu section to be global, you can re-use your mega menu dropdowns by selecting them in a "Reuse" tab in the options window. This will save you time and effort when building new pages.


💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂

Did this answer your question?