Megamenus

This article was last updated on the January 2, 2017.

Since the release of v2.0.0, X features the ability to activate megamenus in the main navigation of the website. Megamenus are a great feature to take advantage of if you’ve got a lot of content that you need to manage within your navigation system that could easily get overwhelming with traditional dropdowns. In this article we’ll take some time to discuss how the megamenu functionality implemented in X operates as well as how to implement them on your site.

Structure

Each megamenu consists of three navigation levels. A top level menu item (the link that will appear in your navbar), first level sub items (which are still linkable and will form the “titles” for each section within your megamenu), and a second level sub items beneath that (which will serve as the “links” for that section of the megamenu). Ultimately, the structure for your megamenu will look something like this:

Megamenu Structure Example

Activation

Each megamenu is activated with the implementation of a couple special classes on the top level menu item in your navigation. The base class needed to activate the megamenu is as follows:

x-megamenu

In addition to the class referenced above, there are four modifier classes that instruct the megamenu on how to appear (e.g. two columns, three columns, et cetera). Only one of these modifier classes is to be used at any given time in conjunction with the base class previously mentioned. The modifier classes for the megamenu are as follows:

col-2
col-3
col-4
col-5

To use these classes, scroll up to the very top of the screen on your admin menus page and select the Screen Options tab. Upon doing so, a dropdown will appear featuring various options that can be toggled on or off. Under the Show advanced menu properties section, look for a checkbox labeled CSS Classes and ensure that it is selected. Once you have done that, scroll back down to your top level menu item and expand it to reveal a new text input labeled CSS Classes (optional). In the text input you will need to enter the base class and one modifier class (separated by a space) to instruct the megamenu on how it should operate. For example, if you wanted a four column megamenu, your navigation item would look something like this:

Megamenu Activation Example

To change the megamenu from a four column layout to a three column layout, all you would need to modify is col-4 to col-3. Once you have these classes in place, your megamenus will be up and running on your website!

Appearance

Much like you would expect, the example used above will display a fullwidth menu with four equal columns of submenus. If you were using Ethos, your megamenu would look something like the following:

Megamenu Appearance Example

However, you’re not limited to single row megamenus with X. If you were using a four column megamenu like the example above, any first level sub items that you add beyond the fourth item will wrap to the next row. For example, you could easily create a two rows by adding eight first level sub items to your megamenu, which would ultimately look something like this:

Megamenu Appearance Example

Keep in mind that based on the amount of links you have present in your megamenu as well as the functionality of the navbar itself (i.e. fixed top), stacking menus like this might not always be something to pursue as it could be too much content for some formats. Ultimately you will need to find what configuration works best for the amount of content you’re trying to present along with your global site layout options.

When using the megamenu feature with a fixed left or fixed right navbar configuration, the megamenu will receive a fixed width due to the unique properties of these layouts. The width of your megamenu is calculated based on the width of your fixed side navbar and is done so to ensure that it will not overflow off the screen on smaller desktops and tablets.