Megamenu in Drupal on the Example of the Droopler Distribution

Droptica

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?

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

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

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

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.

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.

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.

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.

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.

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.

Summary

Originally published at https://www.droptica.com.

Enterprise websites built with best Open Source solutions. We are an Agile software development company. We create big websites with Drupal 8, Symfony and React