How to Use the Menu Item Extras Module for Drupal 8

Mega menus are not a design trend anymore, but an essential part of most of the websites related to news or eCommerce.

The Menu Item Extras module for Drupal 8 improves the default menu system in Drupal, by allowing the site builder to add fields to the menu items. That way, it is possible to create a mega menu with a couple of simple steps.

Follow along to learn how to use this module. Let’s start!

Step #1: Install the Required Modules

In addition to the Menu Item Extras module, you will need to install Viewfield. Viewfield provides a field that holds a reference to a View and renders it whenever the entity containing the field is displayed.

• Open the terminal application of your PC.
• Type:
  • composer require drupal/viewfield
  • composer require drupal/menu_item_extras

Enable both modules after downloading.

• Click Extend.
• Check both modules.
• Click Install.

Step #2: Create a Taxonomy System

Perhaps the word “system” is not very appropriate since we will only create one vocabulary with ten associated terms. However, this example will explain the basics, so you can work with more complicated taxonomy systems in the future.

• Click Structure > Taxonomy > Add vocabulary.
• Enter the name “Topics” and click Save.
• Click Add term and add all terms detailed below one by one.
  • Topics
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Python
    • DevOps

Step #3: Create the Content Types

For the purpose of this tutorial, we are going to use 2 content types with the following fields:

• Services
  • Service Image / Image / Allowed number of values: 1
  • Intro text / Text (formatted) / Allowed number of values: 1
  • Description / Default field

• Blog
  • Category / Taxonomy term / Allowed number of values: unlimited
  • Description / Default field

Make sure you select the Reference type (Topics) when creating the Taxonomy field.

Step #4: Create Content

We are going to create 3 nodes of type Service:

• Tutorials
• Videos
• Books

Each one of these nodes will be associated with a second-level element in the mega menu. On the other hand, we are going to create about 10 nodes of type Blog with different terms associated with them. Make sure that you include 2 of the terms (ex.: D8, WP) with more frequency than the others.

The Content screen should look at the end of this process more or less like the image below.

Step #5: Create the Menu Items

The first level of the main menu will have the following menu items:

• Home
• About
• Resources
• Contact

Each one of the menu items will have an additional (extra) field. This field will be set at the second level of the menu, that is, each one of the card items in the mega menu. This field will allow us to present each one of the view blocks.

• Click Structure > Menus.
• Click Edit menu, to edit the Main navigation.

• Click Add link 3 times to add the missing first-level menu items.
• Click Save each time you enter a menu item name.

Use the special tag to display only the link text.

Once you have created and rearranged the links of your menu,

• Click Manage fields > Add field, to add a field to the menu items.
• Select a field of type Viewfield.
• Give it a proper name and label.
• Click Save and continue.

• Set the Allowed number of values to Unlimited.
• Click Save field settings

You will have the option to link a default view to this particular field. Leave these fields empty.

• Scroll down and click Save settings
• Click Manage display.

• Hide the menu card label.
• Click Save.

Step #6: Create the Views

• Click Structure > Views > Add view
• Show Content of type Services.
• Create a block with an unformatted list of fields.
• Choose to show 3 items per block.
• Click Save and edit.

• Add the Service image field
• Set the image style to Thumbnail and link the image to the Content.
• Click Apply

• Add the Intro text field as well.
• Rearrange the fields.
• Click Save.

• Click Structure > Views > Add view
• Show Content of type Blog.
• Create a block with an unformatted list of fields.
• Choose to show 1 item per block.
• Click Save and edit.

• Add the field Category.
• Click Add and configure fields.
• Click the Multiple field settings.
• Select Unordered list.
• Set the number of values to display to 3.
• Click Apply.

• Remove the Sort criterion
• Click Apply.
• Click Save to save the view.

Step #7: Add the View Blocks to the Menu Items

• Click Structure > Menus
• Edit the Main navigation.
• Edit the menu item Resources.
• Add the 2 blocks you created in step # 5.
• Click Save.

Step #8: The CSS Styles

I am not going to explain this code in detail since it is out of the scope of this tutorial. However, you can research more about Drupal Views and CSS Grid in this article. If you want to practice more with mega menus, take also a look at this article.

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
	background: transparent;
	text-shadow: unset;
	color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
	display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
	position: absolute;
	left: 0;
	top: 166px;
	width: 100%;
	z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
	background: transparent;
	text-shadow: unset;
	color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
	display: grid;
	align-content: center;
	justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
	position: absolute;
	left: 0;
	width: 100%;
	padding-top: 16px;
	background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
	display: grid;
	justify-items: center;
}

.view-tutorials .views-row span > a {
	font-size: 1.3rem    
}

.view-tutorials .views-row .views-field-field-intro-text {
	font-size: 1rem;
}

I hope you liked this tutorial. Thanks for reading!