menu-droopler-screen

Megamenu in Drupal on the Example of the Droopler Distribution

Websites with dozens, hundreds, or thousands of subpages often have a complicated structure. The user gets lost on such websites. Megamenu can make navigation easier. On the example of the Droopler distribution, see how you can conveniently manage large menu items. 

What is Megamenu?

Megamenu is a type of navigation used on websites, consisting of several levels. The first level looks like a standard list of links, but after hovering over one of its elements, additional options are shown.

These options consist not only of a list of links in the second level of navigation but often have a third or even fourth level. Sometimes there are also photos or even videos. 

A menu built in this way is visually appealing to the user and allows them to easily find their way around large websites. 

A simple example of Megamenu using HTML and CSS can be found at: https://www.w3schools.com/howto/howto_css_mega_menu.asp 

Droopler and the module for Megamenu

Droopler is a Drupal-based distribution dedicated for building corporate websites. You can learn more about Droopler here:
https://www.droopler.com 
https://www.drupal.org/project/droopler 
https://github.com/droptica/droopler_project 

In Droopler we have used a module named "Drupal 8 MegaMenu" available for download at https://www.drupal.org/project/we_megamenu 

Before you read further – I assume that you have the Droopler distribution installed. The installation instructions can be found at www.droopler.com 

Sample mega menu in Droopler 

Shown below are some screenshots presenting the menu of a fresh Droopler installation.
As you can see, the menu is configured. The user only needs to change the configuration according to their needs, while when it comes to the programming part – this element of the website is 100% finished, it works, and it does not require any additional activities in this regard.

Sample mega menu in Droopler 

sample menu

Main menu configuration

The main menu settings can be found in the Drupal administration menu in Structure; next, in Drupal 8 MegaMenu, you look for the Main navigation element and from this element's menu you go to edit links.

Main menu configuration

After going to the edit page, the working structure of the main menu appears, which can be freely edited using the "drag and drop" method. 

To add more levels to the menu, however, you move the secondary element to the right to create an "indentation".

Megamenu and adding new blocks

In order to add a content block to the menu, you must first add a new content block. Go to Structure -> Block Layout -> Add custom block and select the content block.

Megamenu and adding new blocks_1

The system will take you to a form, where you can add a new block. Fill out the title and the content of interest. In this case, it will be the title and a few links. Next, add another block with the content and photo.

Megamenu and adding new blocks

After adding two blocks, you need to add them to the region on the page and at the same time – disable the display of these blocks in the region. In the Block Layout of the header section click Place Block, and then select from the popup window the block you want to add and click Place block. In the next step, uncheck the show title option and save.

Megamenu and adding new blocks

When the blocks are added to the region, you should disable them. In order to do this, click Disable in the block's action menu. 

Megamenu and adding new blocks_5

After completing this step, you can start making additions to the menu.
In order to do this, go to Structure, Drupal 8 Mega Menu, and then click config next to main navigation.

You will be taken to the menu edit. In our case, we will add blocks to the "products" element. After clicking "products", a configuration panel appears on the right. Check the Submenu in it as active.

Megamenu and adding new blocks_6

Now a workspace appears under "products", where we will add our blocks in a moment. 

After clicking on this element under "products", another configuration panel appears, but this time it concerns our workspace.

Megamenu and adding new blocks_7

In this panel, you use the plus and minus buttons to set the number of columns in your Megamenu. In the grid field you set the column width, while the Blocks field is used to select the previously added blocks.

After setting the appropriate options, click Save and your menu should look similar to the one in the picture.

Megamenu and adding new blocks_8

Summary

Megamenu configuration with Droopler is quick and easy. The freedom it offers allows you to create a unique website in a short time. 
With the help of the Megamenu module you can present the structure of a complex website to the user in a clear way.

e-book cover