Is there an easier way of implementing a mega menu in Drupal 8? An alternative to all the currently available solutions that... well... come bundled with lots of constraints, risks, and challenges? Of course: Layout Builder paired with the Menu Item Extras module.
I've recently run into Phase 2's blog post on "Creating a Mega Menu Using Layout Builder in Drupal 8" and let me tell you that it was... enlightening.
Why? Because over the last few months I've kept reading about:
- how powerful and revolutionary the new site building tool is
- what a “life-saving” module it is for editorial teams in creating their landing pages
- … and for any Drupal developer when it comes to crafting the layout of each content type in his/her project...
Yet no one wrote anything about a particular use case of this “wonder” module: creating mega menus.
Now, prepare to discover how you can use it to build your own drop-down menu, one to include multiple columns, multiple links with subtitles and descriptions and so on...
1. But First: What Makes a Mega Menu?
In other words, what are those details that turn a common menu into a... mega one?
Here are some distinguishing features of a mega menu in Drupal 8:
- it's much more than “just” a list of menu links
- its links could further unfold multiple subtitles and descriptions
- it could include several submenus, as well, multiple pieces of static content, multiple columns, images...
Being such a complex cluster of different components, it's only but predictable that a mega menu poses challenges in terms of revision moderation, administration, and mobile responsiveness.
2. “Before the Layout Builder” Solutions & The Challenges They Posed
Before we get to the “tutorial-like” part of this blog post (and the very reason you've started reading it), let's see what are the current options at hand for building mega menus in our Drupal 8 projects:
- the we_megamenu
- custom blocks
- custom code for each Drupal 8 project
- the Superfish module
And a few more...
Why have we been “craving” for yet another solution? One leveraging the component-based design principle?
Well, because the currently available ones often:
- did help us create our mega menus, yet came “packed” with issues of their own
- didn't enable us/our clients to further change the implemented mega menus
- turned migration processes into some real challenges
- didn't support consistency across a website, over a long period of time
3. Using Layout Builder & Menu Item Extras for a Mega Menu in Drupal 8
The reason for all this... “hype” built around the Layout Builder module could get summed up to this: you're now able to customize the layout of the content on various sections on your website.
Moreover, the module comes with a conveniently intuitive UI, with visual preview, for you to use. You just select your predefined layout, then fill it in with the right blocks. And you keep doing that for every section on your Drupal 8 website. In short, it's designed to support multiple different layouts.
Quite... liberating, right?
Now, getting back to our topic here — building a mega menu in Drupal 8 using this specific module — here's how you do it:
- since the Layout Builder module supports any “fieldable” entity, you'll need the Menu Item Extras module to make your menu item entity... fieldable
- this way, you'd be able to add fields, form and to display view modes (e.g. it enables you to pair your menu link with... an “icon” image field)
- moreover, since Drupal 8.6. all you need to do is enable the Layout Builder module and voila: you'll have your default menu item view display mode; no need to invest any more time in... adding your own additional fields
- by choosing the "Allow each custom menu link to have its layout customized" option, you'll have a layout_builder__layout field added to your menu item; it's this field that will be responsible for storing the list of blocks in that section on your website
- by choosing the “Add a Link” option, you'll have a new tab opening up, where you can customize the layout of that new menu link item
- you'll get to use the same familiar UI that Layout Builder's already “popular” for, with the only exception that instead of setting up node landing pages, you'd now be selecting the blocks to be displayed on that particular menu item
- in other words, you're free to configure its layout
- go with “Add section” for a new layout or with “Add Block” for adding blocks to that section
4. “And How Do I Theme It?”
OK, so you've created your mega menu in Drupal 8... now, how do you theme it?
Luckily, the Menu Item Extras “spoils” you with twig templates to choose from and put together the style and design of your menu item.
Furthermore, each menu item comes with a “content” variable storing the field data of the view mode. In that respect, it's your theme that decides how to render all your menus.
5. Final Word
With this powerful duo here — Layout Builder and Menu Item Extras — you get to make your menu item entity fieldable.
In addition to that, the main advantage for using this “duo” to create a mega menu in Drupal 8 is that you get to use the same field, view mode architecture, and entity used in Drupal 8. No need to set up a whole new data model and architecture to support this solution.